Particle.js from a secure page

Troubleshooting
1

I’ve built a crude (but effective) front end to some stuff I’m working on. Running it from a file:/// URL works great. When I move the html file to my server (which runs over SSL) it won’t run because the browser refuses to run insecure content from jsdelivr.

Is there a fix? Or a work around? I guess I could move it to an insecure server …

2

Have you tried the URL with https:// (if that would make any difference)?
Alternatively (and perhaps better regardless) is if you download the files and add them to your server. That way you’ll never have to rely on a third party, and the Server browser won’t have to fetch things in different spots. It also assures that the code doesn’t change without you having a chance to test it (for breaking changes). it’s versioned

3

There not enough information here so I can’t be certain if anything I suggest will help. So here goes…
In your html page, are you using the http protocol/scheme when you reference the assets from jsdelivr? For example let’s say you’re referencing a .css file so in your html. So you have a <link> tag in your html and the href attribute has a value such as http://cdn.jsdelivr.net/xxx. If so, then simply change the href attribute’s value to //cdn.jsdelivr.net/

4

Hmm....well that defeats the purpose of a CDN then, no? The basic idea behind using a CDN is that folks may already have those files in their browser cache (because other websites have used the same files from the same CDN) and thus saves time downloading.

Yes, there are pros and cons to both - using and not using a CDN.

2 Likes
5

It would, hence the ‘alternatively’. If the choice is between moving to a less secure server, or keeping the CDN for a rather niche library, I know what I’d pick though :wink:

1 Like
6

Unfortunately, adding the https:// to the CDN URL doesn’t change anything. Now, if Particle wanted top make this a workable solution (and I think they should) they could add the SHA ‘integrity’ signature to the file, as is done by bootstrap, etc. to overcome this.

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous" type="text/javascript"></script>

That actually works.

7

So the solve here is to add the https:// AND the crossorigin=“anonymous” to the script tag.

2 Likes
8

Thanks for posting your solution!

1 Like