'Adding hashes in Content-Security-Policy: style-src

I have just added Google Translate's JavaScript tool to my project. I've gone through and added hashes to my script-src and it is working. The issue is that I am still getting errors in the console about styles that cannot be loaded, even after I've added the hash to style-src (Chrome)

Sample Error Message:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'sha256-+cU/VT0vv47hxLJZovgG53kGPWPopxhXhYgUD6IR5Ro=' 'sha256-2Ohx/ATsoWMOlFyvs2k+OujvqXKOHaLKZnHMV8PRbIc=' 'sha256-qQUBUjasnJdhrNlgzajDJnnOf9HGERy1tkajP7dru0c=' 'sha256-B6LEPigs3viM+y/BwYQU665laXgIDFgp+sr+sdoaJqQ=' translate.googleapis.com 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-qQUBUjasnJdhrNlgzajDJnnOf9HGERy1tkajP7dru0c='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

You can see that I have the hash already in my CSP.

Also, adding hashes in exactly this way took care of my inline-script error messages.

Sample HTML:

<!DOCTYPE html>
<html lang="en-US">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 
translate.google.com translate.googleapis.com localhost www.gstatic.com www.google.com 
'sha256-qQUBUjasnJdhrNlgzajDJnnOf9HGERy1tkajP7dru0c=' 
'sha256-+cU/VT0vv47hxLJZovgG53kGPWPopxhXhYgUD6IR5Ro=' ws: wss:; object-src 'none'; 

script-src 'sha256-NNiElek2Ktxo4OLn2zGTHHeUR6b91/P618EXWJXzl3s=' 
'sha256-97l24HYIWEdSIQ8PoMHzpxiGCZuyBDXtN19RPKFsOgk=' 

'sha256-w65k1oeqcYS7ejRz7pWG6X3uKVFzmotHeiJkjIE7LQY=' 
'sha256-qQUBUjasnJdhrNlgzajDJnnOf9HGERy1tkajP7dru0c=' 'self' 
translate.google.com translate.googleapis.com translate-pa.googleapis.com; 

style-src 
'sha256-+cU/VT0vv47hxLJZovgG53kGPWPopxhXhYgUD6IR5Ro=' 
'sha256-2Ohx/ATsoWMOlFyvs2k+OujvqXKOHaLKZnHMV8PRbIc=' 
'sha256-qQUBUjasnJdhrNlgzajDJnnOf9HGERy1tkajP7dru0c=' 
'sha256-B6LEPigs3viM+y/BwYQU665laXgIDFgp+sr+sdoaJqQ=' translate.googleapis.com 'self'; "/>

<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>
<Table>
<tr>
<td>
<div id="google_translate_element"></div>
</td>
</tr>
</table>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</body>
</html>

What do I need to change to get rid of these inline style error messages?

htmlcontent-security-policygoogle-translate


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions