Resolving the script tag type attribute hash prepending issue with Cloudflare

Fix Cloudflare's script tag hash prepending issue with our guide.

If your script HTML tag has the type attribute prepended with a hash, like <script type="ea10e272b0a1989fb2f3aa4e-text/javascript">...</script> and you’re using Cloudflare services, then the root cause is the Cloudflare Rocket Loader, a feature of Cloudflare that optimizes the loading of JavaScript resources on your web pages.

Rocket Loader modifies the type attribute of script tags for website loading optimization by deferring the loading of JavaScript until after rendering. This modification can sometimes cause issues with HTML validation and Content Security Policy (CSP) headers.

Cloudflare Rocket Loader adds an argument “type” into the script tag and causing issues with the W3C validator due to the “subtype missing” error.

Solution for hash prepending issue with Cloudflare

To resolve this issue, you have a few options:

• Disable Cloudflare Rocket Loader: You can disable Rocket Loader feature in your Cloudflare dashboard. This will stop Cloudflare from modifying your script tags, including the prepending of a hash to the type attribute.
• Use the data-cfasync="false" attribute: By adding data-cfasync="false" to your <script> tags, you instruct Cloudflare not to process these scripts with Rocket Loader. This can be a quick fix if you only have a few scripts that are causing issues.
• Contact Cloudflare Support: If you’re unable to resolve the issue with the above steps, or if you need further assistance, you can contact Cloudflare Support through the Get More Help button in your Cloudflare dashboard.

Here’s an example of how to add the data-cfasync="false" attribute to a <script> HTML tag:

<script data-cfasync="false" src="your-script.js"></script>

Final notes

It’s important to note that while Rocket Loader can improve page load times by asynchronously loading JavaScript, it may also cause compatibility issues with certain scripts and affect HTML validation. Therefore, it’s essential to carefully evaluate the impact of Rocket Loader on your web pages and make adjustments as necessary to ensure proper functionality and compliance with web standards.