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.