DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
How to migrate javascript¶
There are four different cases to check before you activate the extension.
Attention
Before you activate the extension check you site and set the script-src directive correctly
The goal is, that your site is able to run without the unsafe-inline and/or unsafe-eval options for script-src.
1) Your own JavaScript files:¶
<script src="https//your_domain.com/js/library.js"></script>
These urls considered as "self" running urls. You don't need to do anything, each scripts referenced under the same domain are enabled.
However, if you have a subdomain which is not the same as the domain of the page, you should enable it explicit:
<script src="https//subdomain.your_domain.com/js/library.js"></script>
plugin.tx_csp.settings.additionalSources.script.1 = subdomain.your_domain.com
(You can add multiple domains at once or with different indexes)
2) External JavaScript files¶
Do you reference external files like jQuery or Google Analytics? Then you need to enable these domain for the script-src directive. Sometimes -like in this case- you need to think about what these scripts are do. Like tracking codes with small images. You can use the additionalSources as by 1) but for these there is an other way to group the settings pro usecase.
Some popular sources are added by default however you need to enable them if you are using them.
- YouTube (enabled by default)
- Vimeo (enabled by default)
- GoogleAnalytics (disabled)
- jQuery (disabled)
- Google fonts (disabled)
- Google maps (disabled)
For the later four cases you can enable what you need with the following TypoScript constants:
plugin.tx_csp.settings.presets.googleAnalytics.enabled = 1 plugin.tx_csp.settings.presets.jQuery.enabled = 1 plugin.tx_csp.settings.presets.googleFonts.enabled = 1 plugin.tx_csp.settings.presets.googleMaps.enabled = 1
You can define your own presets. Please read the Typoscript / Settings section.
3) Inline scripts¶
If you have <script> </script> declarations in your markup you need to change the generation of them.
3a) If you have a classic TypoScript like this:¶
page.headerData.10 = TEXT
page.headerData.10 (
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
)
You can make two easy change to make this declaration valid for your content security policy header.
- Change the TEXT to a new content object (introduced by this extension): SCRIPT
- Delete the <script> tag declartion it will be added automatically.
Result:
page.headerData.10 = SCRIPT
page.headerData.10 (
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
)
3b) In your Fluid template¶
If you have some kind of script in your fluid. You can use the ViewHelper csp:script. The script above would look like this if you use inside fluid.
{namespace csp=AndrasOtto\Csp\ViewHelpers}
<csp:script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</csp:script>
3c) Hook or a DataProcessor or a userFunc¶
If you generate a script like string in some php code. You can use the getValidScriptTag static method of the ScriptUtility class.
ScriptUtility::getValidScriptTag($script);
Note
Script should not have <script> and </script> in the string, it should contain only your JavaScript code only.
4) Action declaration (f.i. onclick) or "javascript:" links.¶
These are also blocked by the content security policy and currently it is hard to enable them one by one. It is also recommended not to write code like these but use javascript or jQuery and register eventListeners in your javascript files instead.
Attention
If you can't resolve each of the above points then you can't use a strict CSP header without loosing functionality of your website. In this case you can still use CSP if you add: plugin.tx_csp.settings.additionalSources.script.1 = unsafe-inline to your TypoScript setup. However with this option the header does not really useful since a XSS attack is still possible.