Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
24 days ago

When attempting to include the 'integrity' attribute on script tags, why am I receiving a parsing error?

To add the 'integrity' attribute to a Stripe CDN while using the 'crypto-js' library, I followed this method:

import { SHA256 } from 'crypto-js';

const StripeInit = () => {
  const stripeScript = document.createElement('script');
  stripeScript.defer = true;
  const hashingStripe = SHA256('https://js.stripe.com/v3').toString();
  stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
  stripeScript.setAttribute('integrity', hashingStripe);
  stripeScript.setAttribute('crossorigin', 'anonymous');
  document.head.appendChild(stripeScript);
};

export default StripeInit;
However, I encountered an error:

The 'integrity' attribute ('b178f591ba38eb1c0c72447cd31ff08740553dee8beaba61d8f59466b79ae0a7') cannot be parsed because the hash algorithm must be 'sha256', 'sha384', or 'sha512', followed by a '-' character.

Although I tried to concatenate the hash value with 'sha256-' or 'sha512-', as instructed in the error message, the script was still blocked.

My intention was to use the 'integrity' attribute to make sure that only trusted external scripts are executed.

Answers(2)
avatar
Vogi
23 days ago
Verified Answer
The error message you received is due to the fact that the hash algorithm used in the 'integrity' attribute must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character. You mentioned that you tried concatenating the hash value with 'sha256-' or 'sha512-', but it still didn't work. I suggest that you try using the 'crypto.subtle.digest()' method instead of the 'crypto-js' library. Here's an example: 
const stripeScript = document.createElement('script');
stripeScript.defer = true;
const response = await fetch('https://js.stripe.com/v3/');
const buffer = await response.arrayBuffer();
const hash = await crypto.subtle.digest('SHA-256', buffer);
const hashArray = Array.from(new Uint8Array(hash));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
stripeScript.setAttribute('integrity', sha256-${hashHex});
stripeScript.setAttribute('crossorigin', 'anonymous');
document.head.appendChild(stripeScript);
This should work as expected. Let me know if you have any other questions or concerns.

Sources

https://stackoverflow.com/.../parsing-error-when-adding-integrity-attribute-on-script-tags
avatar
Tolerim
24 days ago
The error you are getting suggests that the hash algorithm used in calculating the integrity attribute is not valid. According to the error message, the hash algorithm should be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character. To fix this issue, you need to modify the code that calculates the hash value to use the correct hash algorithm. In this case, you should use the 'sha384' hash algorithm. Here's an updated version of your code that should work: 
import { SHA384 } from 'crypto-js';

const StripeInit = () => {
  const stripeScript = document.createElement('script');
  stripeScript.defer = true;
  const hashingStripe = 'sha384-' + SHA384('https://js.stripe.com/v3').toString();
  stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
  stripeScript.setAttribute('integrity', hashingStripe);
  stripeScript.setAttribute('crossorigin', 'anonymous');
  document.head.appendChild(stripeScript);
};

export default StripeInit;
In this updated version, we are using the 'sha384' hash algorithm to calculate the hash value. We then concatenate the 'sha384-' prefix with the hash value to create the integrity attribute value that we set on the script element. This should ensure that the script is loaded only from a trusted source.
;