Intro.js: Failed to find a valid digest in the 'integrity' attribute for resource with computed SHA-512 integrity

Question

I am trying to implement a simple intro animation to my html page using Intro.js library.

I have included this library in my html page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/6.0.0/intro.min.js" integrity="sha512-i3JuyB+yXgX08haAnY9OnbCuv+a0aB6eLeKh970IOC3XOeWVnOtZlcla55VztDzqCHbl2zn9gpeNu2VBNdvmdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

This is my html code:

<div data-title="Welcome!" data-intro="Hello World! " class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>

And my javascript:

introJs().setOption("dontShowAgain", true).start();

When I execute the code, I keep getting these errors:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/intro.js/6.0.0/intro.min.js' with computed SHA-512 integrity 'mceGQCYWZuRNu27jG8kIrAWT++MIJ1HUEiXy0BTJNkuJEeislqxEZ1KIyfHNMh2YWYAf3oCumvhFV5VYoFfVlA=='. The resource has been blocked.

Uncaught ReferenceError: introJs is not defined

Why am I getting this error? How do I resolve this?

score 0 · Answer 1 · answered Dec 22 '22 at 06:09

Using these imports

<link href="https://unpkg.com/intro.js/minified/introjs.min.css" rel="stylesheet"> 
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>

in place of

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/6.0.0/intro.min.js" integrity="sha512-i3JuyB+yXgX08haAnY9OnbCuv+a0aB6eLeKh970IOC3XOeWVnOtZlcla55VztDzqCHbl2zn9gpeNu2VBNdvmdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

resolved the issue

score 0 · Accepted Answer · answered Dec 22 '22 at 11:48

The integrity field of that <script> tag tells the browser how to check that the file you're loading from the CDN hasn't changed or been tampered with. The browser will download the file, check that the hash matches, and only then allow it to be loaded into the page. You can read more about how that works here: HTML script integrity attribute.

In your case, the integrity hash isn't matching the downloaded resource for some reason, which is what that first error is telling you. The script is therefore not loaded into the page, which is why introJs is not defined. In your answer (which should probably be a comment or extra detail in your question) the working imports don't have any integrity checking, so you're not hitting the same failure case.

You can generate the hash for any resource with this command:

openssl dgst -sha512 -binary FILENAME.js | openssl base64 -A

which I've taken from this hash generator tool. As of right now (22nd Dec 2022), the hash for the resource in your original question should be as follows:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/6.0.0/intro.min.js" integrity="sha512-mceGQCYWZuRNu27jG8kIrAWT++MIJ1HUEiXy0BTJNkuJEeislqxEZ1KIyfHNMh2YWYAf3oCumvhFV5VYoFfVlA==" crossorigin="anonymous"></script>

You should check where you got the original integrity hash from and confirm why it has changed. If you changed the version number that would be expected, but if not then something funky might be going on.

Intro.js: Failed to find a valid digest in the 'integrity' attribute for resource with computed SHA-512 integrity

2 Answers2