script-src-attr

The script-src-attr directive controls which JavaScript sources can be loaded and executed from HTML script elements with specific attributes. This directive specifically applies to inline scripts that use attributes like onclick, onload, onerror, etc.

Relationship with script-src

The script-src-attr directive works in conjunction with script-src to provide comprehensive control over JavaScript execution in your web application:

script-src controls the loading and execution of <script> elements and their contents
script-src-attr specifically controls event handler attributes (like onclick, onload, etc.)
If script-src-attr is not specified, the browser falls back to the rules specified in script-src
Both directives can be used together to create a more granular security policy

For example, you might want to:

Allow inline scripts with nonces via script-src
Block all inline event handlers via script-src-attr
Or vice versa, depending on your security requirements

Recommended Values

'none' No sources are allowed
Explore detailed value definitions

Recommended script-src-attr configuration

Content-Security-Policy: script-src-attr 'none';

Tips & Tricks

Hashes can be used to allow specific inline event handlers. See the values section for more information.
Do not use 'unsafe-hashes' as it may introduce security vulnerabilities.

Possible Values

'none': No inline event handlers are allowed
Nonces: 'sha256-<hash>' for specific inline event handlers
⚠️ 'unsafe-hashes': Allows inline event handlers (insecure)

Example Configurations

Example policy with nonce

CSP Header with hash

Content-Security-Policy: script-src-attr 'sha256-xsuTGwM1pbHxJt6Bcu7KLls/Z+Q7K2yHs6kiFf8OBkA=';;

Allowed

<!-- allowed by 'sha256-xsuTGwM1pbHxJt6Bcu7KLls/Z+Q7K2yHs6kiFf8OBkA=' -->
<button onclick="alert('Hello')">Click me</button>

Blocked

<!-- blocked as the hash of the script is not in the directive -->
<button onclick="alert('An other text')">Click me</button>

Caution Regarding unsafe-hashes

The unsafe- prefix in any CSP directive indicates a security compromise. Rather than using HTML event handler attributes (like onclick, onload, or onmouseover), it's recommended to restructure your code for better security.

Implementing unsafe-hashes

Consider a scenario where you need interactive elements in your application:

<a href="#" onclick="performAction();"></a>

When implementing a script-src-attr policy, this inline event handler code will likely be blocked by your CSP rules. This happens because inline scripts require explicit permission to execute. While unsafe-hashes provides a way to permit specific inline handlers, it maintains similar security vulnerabilities as other inline code approaches:

<div onclick="showMessage('Greetings')"></div>

To allow this specific handler, you would add this to your CSP header:

script-src 'unsafe-hashes' 'sha256-9fMT4WzXC8X7VFJ54CvM24D/ZU4ZQ9dBDxzYfnV87bg='

This permits your specific inline handler to execute, but potentially opens the door for similar malicious code injections.

Safer Alternatives to unsafe-hashes

Since the unsafe-hashes directive introduces security risks, a more secure approach involves separating your event handling logic into dedicated JavaScript files. Instead of inline handlers, consider this approach:

<div id="messageContainer"></div>

Then in your external JavaScript file:

document.getElementById("messageContainer").addEventListener("click", function() {
  showMessage('Greetings');
});

For those using frameworks like React, you might implement:

function handleClick() {
showMessage('Greetings');
}

return (
<div onClick={handleClick}>Click for message</div>
);

Additional Information

The script-src-attr directive is crucial for preventing XSS attacks through inline event handlers
This directive specifically controls event handler attributes, while script-src controls script elements