I've embedded a Scratch project into my website, but it come up with multiple warnings in the console. How can I resolve them?

I've embedded a Scratch project into my website using the iframe tag from the embed copy link in Scratch:

https://larakoseff.github.io/projects https://github.com/larakoseff/larakoseff.github.io.git

It comes up with warnings in the console regarding Canvas2D and the AudioContext sends out ongoing warnings until you start to engage with the game.

Here is the code that is causing the warnings:

<iframe src="https://scratch.mit.edu/projects/861818624/embed" 
allowtransparency="true" width="485" height="402" frameborder="0" 
scrolling="no" allowfullscreen class="project-image"></iframe>

Here are the warnings I receive in the console: embed.bundle.js:23 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Stop! This is part of your browser intended for developers. If someone told you to copy-and-paste something here, don't do it! It could allow them to take over your Scratch account, delete all of your projects, or do many other harmful things. If you don't understand what exactly you are doing here, you should close this window without doing anything.

I tried following the suggested links in the warning and adding various attributes into the iframe tag. I'm simply trying to ensure that there are no issues in the console.

Solution

there are two part to look at

1st the warning you are getting i.e.

Stop!

common.bundle.js:33 This is part of your browser intended for developers. If someone told you to copy-and-paste something here, don't do it! It could allow them to take over your Scratch account, delete all of your projects, or do many other harmful things. If you don't understand what exactly you are doing here, you should close this window without doing anything.

it is to make people aware about the denger the can face if pasted unknown code in their console to know more on that go through is-console-in-inspect-dangerous?

2nd part is where you are ask to

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

for that

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <h1>
   Good Boys don't play with console 
  </h1>

  <iframe src="https://scratch.mit.edu/projects/861818624/embed" 
allowtransparency="true" width="485" height="402" frameborder="0" 
scrolling="no" allowfullscreen class="project-image"></iframe>
  <script >
    let audioContext;

    //  create or resume the AudioContext
    function createOrResumeAudioContext() {
      
      if (audioContext) {
        // created --> resume it
        audioContext.resume();
      } else {
        //not created then create a new AudioContext
        audioContext = new AudioContext();
      }
    }
  
   
    document.addEventListener('click', createOrResumeAudioContext);  //listener to detect a user gesture here for click event
  </script>
</body>

</html>

but there must be some part where the adBlocker may rese some of the warning.

on Scratch there is open Discussion on this , so might like to look into it post-5878134