Demos on 2D Collision Detection page are not working due to external script not loading

[pano9000]

MDN URL

https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

The demos based on the external "crafty" JS lib are not playable, because the "crafty" script seems to get blocked by CORS. The console then shows "ReferenceError: Crafty is not defined".

Happens with Firefox 114.0.2 and Chrome

What did you expect to see?

The demo should be playable

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/games/techniques/2d_collision_detection
• MDN URL: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/games/techniques/2d_collision_detection/index.md
• Last commit: mdn/content@acfe8c9
• Document last modified: 2023-07-07T07:19:19.000Z

[hamishwillee]

@caugner This needs to move to yari repo.

CORS blocks use of https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js. There is nothing an author can do except use another library. Not sure what the solution is - short term perhaps could add the hash for this particular case to the script-src for MDN/play: sha256-FDyPg8CqqIpPAfGVKx1YeKduyLs0ghNYWII21wL+7HM=.

Longer term - add a way for trusted authors to set the hash? Thoughts?

[hamishwillee]

PS, thanks @pano9000 !

[hamishwillee]

Same problem but different library here #9359

Implies we need a dynamic way to specify in examples that certain hashes are trusted.

[caugner]

It looks like a timing issue, i.e. Crafty seems to be loaded only after it is used:

I don't see any evidence of a CSP issue, but maybe that part of the issue has been resolved in the mean-time. However, maybe this issue is related to #9324.

[hamishwillee]

@caugner You are right that this is not a CSP issue. Thank you!

I can get this to work by moving script creation into the javascript and running the code on the load event (as per details twistie below)

But IMO this still indicates a bug in Yari. The HTML is loaded like this which should be blocking:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script>

In MDN this is late loaded, hence the error. If you copy the same source into an HTML file it works fine.

const scriptElement = document.createElement("script");
scriptElement.setAttribute(
  "src",
  "https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js",
);
scriptElement.setAttribute("type", "text/javascript");
scriptElement.onload = craftyLoaded;
document.body.appendChild(scriptElement);
function craftyLoaded() {

Crafty.init(200, 200);
const dim1 = { x: 5, y: 5, w: 50, h: 50 };

const dim2 = { x: 20, y: 10, w: 60, h: 40 };
const rect1 = Crafty.e("2D, Canvas, Color").attr(dim1).color("red");
const rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway")

.fourway(2)

.attr(dim2)

.color("blue");
rect2.bind("EnterFrame", function () {

if (

rect1.x < rect2.x + rect2.w &&

rect1.x + rect1.w > rect2.x &&

rect1.y < rect2.y + rect2.h &&

rect1.y + rect1.h > rect2.y

) {

// Collision detected!

this.color("green");

} else {

// No collision

this.color("blue");

}

});

}

[pseudopilot]

@caugner , I think this particular bug was fixed by #11017.

#10714, mentioned above, has similar source of problem, but it's a bit different case and was not resolved by that PR.

[pseudopilot]

Sorry, my bad, I tested it wrongly. #10714 is also fixed and doesn't show the error any more.

[caugner]

Thank you @pseudopilot, it looks indeed like this was fixed by #11017. 🎉