bitjson / qr-code

A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.
https://qr.bitjson.com/
MIT License
1.17k stars 58 forks source link

Can't use with CDN 1.0.2 #11

Open SAUFRAS0FT opened 1 month ago

SAUFRAS0FT commented 1 month ago

Reproducing:

I just tried to put: <script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script> on my HTML code.

Then I open my browser to my local Apache WEB server at the address https://127.0.0.1 and I ask for my HTML page to load, then in the javascript console I get the following message:

Loading the module at “https://127.0.0.1/js/qr-code/qr-code.orxjfzvr.js” was blocked due to a prohibited MIME type (“text/html”).

Analysis

The script tries to load the following resource (HTTP GET): https://127.0.0.1/js/qr-code/qr-code.orxjfzvr.js

It's not normal for it to load a local resource

When we look in https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js

We can see:

d.src=n+"qr-code.orxjfzvr.js" d.setAttribute("type","module")

and: n=n||a.resourcesUrl,d=(p=t.querySelectorAll("script")).length-1;

and after this:

n=n||a.resourcesUrl,d=(p=t.querySelectorAll("script")).length-1;
...
p=m.getAttribute("data-resources-url"),
!n&&p&&(n=p),
!n&&m.src&&(n=(p=m.src.split("/").slice(0,-1)).join("/")+(p.length?"/":"")+"qr-code/")

n is initialized to a.resourcesUrl if it exists. If n is not set, it tries to find a data-resources-url attribute on scripts. If n is still undefined, it takes the path of the current script and adds /qr-code/

Why is data-resources-url poorly defined?

Workaround fix

To do this, I downloaded all the resources requested by the minify script at the following address: https://unpkg.com/browse/@bitjson/qr-code@1.0.2/dist/qr-code/

then I placed them in the path indicated in the javascript console (in my case https://127.0.0.1/js/qr-code/)

It was my first bug contribution, please tell me in case I do something wrong