Snippets/Load JS and CSS by URL - MediaWiki
Jump to content
From mediawiki.org
Snippets
How to use Snippets
List of Snippets
Load JS and CSS by URL
Language(s):
JavaScript
Compatible with:
MediaWiki 1.35
Description
Adds support for loading a script or stylesheet from a wiki page in the MediaWiki namespace, based on a URL parameter. This makes showing demonstrations easier as users don't have to enable a gadget or put something in their user
common.js
Warning:
If you add this snippet to a wiki, you should take special care that there are no scripts in the MediaWiki namespace susceptible to
XSS
attacks.
Code
This version adds two new url parameters
withJS
and
withCSS
. You can append them on to the end of the url:
?withCSS=MediaWiki:Foo.css&withJS=MediaWiki:Foo.js
/**
* @source https://www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL Revision 2020-04-04
*/
mw
loader
using
'mediawiki.util'
],
function
()
var
extraCSS
mw
util
getParamValue
'withCSS'
),
extraJS
mw
util
getParamValue
'withJS'
);
if
extraCSS
// WARNING: DO NOT REMOVE THIS "IF" - REQUIRED FOR SECURITY (against XSS/CSRF attacks)
if
/^MediaWiki:[^&<>=%#]*\.css$/
test
extraCSS
mw
loader
load
'/w/index.php?title='
encodeURIComponent
extraCSS
'&action=raw&ctype=text/css'
'text/css'
);
else
mw
notify
'Only pages from the MediaWiki namespace are allowed.'
title
'Invalid withCSS value'
);
if
extraJS
// WARNING: DO NOT REMOVE THIS "IF" - REQUIRED FOR SECURITY (against XSS/CSRF attacks)
if
/^MediaWiki:[^&<>=%#]*\.js$/
test
extraJS
mw
loader
load
'/w/index.php?title='
encodeURIComponent
extraJS
'&action=raw&ctype=text/javascript'
);
else
mw
notify
'Only pages from the MediaWiki namespace are allowed.'
title
'Invalid withJS value'
);
});
With module
/**
* @source https://www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL Revision 2020-04-04
*/
mw
loader
using
'mediawiki.util'
],
function
()
var
extraCSS
mw
util
getParamValue
'withCSS'
),
extraJS
mw
util
getParamValue
'withJS'
),
extraModule
mw
util
getParamValue
'withModule'
);
if
extraCSS
// WARNING: DO NOT REMOVE THIS "IF" - REQUIRED FOR SECURITY (against XSS/CSRF attacks)
if
/^MediaWiki:[^&<>=%#]*\.css$/
test
extraCSS
mw
loader
load
'/w/index.php?title='
encodeURIComponent
extraCSS
'&action=raw&ctype=text/css'
'text/css'
);
else
mw
notify
'Only pages from the MediaWiki namespace are allowed.'
title
'Invalid withCSS value'
);
if
extraJS
// WARNING: DO NOT REMOVE THIS "IF" - REQUIRED FOR SECURITY (against XSS/CSRF attacks)
if
/^MediaWiki:[^&<>=%#]*\.js$/
test
extraJS
mw
loader
load
'/w/index.php?title='
encodeURIComponent
extraJS
'&action=raw&ctype=text/javascript'
);
else
mw
notify
'Only pages from the MediaWiki namespace are allowed.'
title
'Invalid withJS value'
);
if
extraModule
if
/^ext\.gadget\.[^,\|]+$/
test
extraModule
mw
loader
load
extraModule
);
else
mw
notify
'Only gadget modules are allowed.'
title
'Invalid withModule value'
);
});
Load multiple files
Warning:
The version of this snippet prior to May 8, 2017 had a
security vulnerability
in it. If you used an older version of this snippet, please update to the version shown below
This version adds a single url parameter,
use
but allows multiple files to be separated by a pipe (|). You can then append on to the end of a url:
?use=MediaWiki:Foo.js|MediaWiki:Foo.css|MediaWiki:Bar.js
/**
* Load CSS and JS files temporarily through URL.
* &use=File1.css|File2.css|File3.js
* Required modules: mediawiki.util
* @source https://www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL#Load_multiple_files Revision 2023-09-24
*/
mw
loader
using
'mediawiki.util'
function
()
var
files
mw
util
getParamValue
'use'
),
user
FileRE
ExtRE
path
if
files
return
user
mw
util
escapeRegExp
mw
config
get
'wgUserName'
''
);
FileRE
new
RegExp
'^(?:MediaWiki:'
user
'|User:'
user
'/'
''
')[^&<>=%#]*\\.(js|css)$'
);
ExtRE
new
RegExp
'^ext\\.[^,]+$'
);
path
mw
config
get
'wgServer'
mw
config
get
'wgScript'
'?action=raw&ctype=text/'
each
files
split
'|'
),
function
var
trim
),
what
FileRE
exec
||
''
''
];
switch
what
case
'js'
mw
loader
load
path
'javascript&title='
encodeURIComponent
);
break
case
'css'
mw
loader
load
path
'css&title='
encodeURIComponent
);
break
default
if
ExtRE
exec
mw
loader
load
);
});
});
Retrieved from "
Categories
Snippets with JavaScript
All snippets
Snippets/Load JS and CSS by URL
Add topic
US