32 Matching Annotations
  1. Sep 2023
  2. Aug 2023
  3. May 2023
  4. Apr 2023
  5. Mar 2023
    1. ```js

      window.onSpotifyIframeApiReady = (IFrameAPI) => { let element = document.getElementById('embed-iframe'); let options = { uri: 'spotify:episode:7makk4oTQel546B0PZlDM5' }; let callback = (EmbedController) => {}; IFrameAPI.createController(element, options, callback); }; ```

  6. Dec 2022
  7. Aug 2022
    1. The Widget API allows you to externally control the widget that is embedded on your website through javascript. You set the width and height of the widget to 0 and it hides the widget. I tinkered with this on codepen this week and I am pleased that I now have a working playlist ready to be utilized on my website.

      https://codepen.io/mdcrowcodes/pen/eYEMyzY

      ```js var iframeElement = document.querySelector('iframe'); var iframeElementID = iframeElement.id; var widget = SC.Widget(iframeElement); var x = document.getElementById("play");

      widget.bind(SC.Widget.Events.FINISH,function(){ widget.getCurrentSound(function(currentSound) { document.getElementById("currentTrack").innerHTML = currentSound.title; }); });

      function play(){<br /> if (x.innerHTML === "▶") { x.innerHTML = "||"; } else {x.innerHTML = "▶"; } widget.toggle(); };

      function next(){ x.innerHTML = "||"; widget.next(); widget.seekTo(0); widget.getCurrentSound(function(currentSound) { document.getElementById("currentTrack").innerHTML = currentSound.title; }); };

      function prev(){ x.innerHTML = "||"; widget.prev(); widget.seekTo(0); widget.getCurrentSound(function(currentSound) { document.getElementById("currentTrack").innerHTML = currentSound.title; }); };

      widget.bind(SC.Widget.Events.READY, function() { widget.getCurrentSound(function(currentSound) { document.getElementById("currentTrack").innerHTML = currentSound.title;

      widget.getSounds(function(tracks){ for (var i in tracks) {

         $('#tracklist').append("<li class='track-item' id='" + i + "'" + ">" + tracks[i].title + "</li>");
        }
      
       $(".track-item").click(function(){
         var s = this.id
         widget.seekTo(0);
      widget.skip(s);       
        x.innerHTML = "||" ;     widget.getCurrentSound(function(currentSound) {
      

      document.getElementById("currentTrack").innerHTML = currentSound.title; });

      });

      });

      }); }); ```

    1. ```js (function () { var html = document.documentElement.innerHTML;

      /** 
       * the iframe's onload event is triggered twice: once when appending it to the document, 
       * and once when the form finishes submitting and the new URL is loaded 
       */
      var loaded = 0;
      
      var iframe = document.createElement('iframe');
      
          // unique name, to make sure we don't create any conflicts with other elements on the page
          iframe.name = 'bookmarklet-' + Math.floor((Math.random() * 10000) + 1);
          iframe.style.display = 'none';
      
          iframe.onload = function () {
              // remove the iframe from the document on the second firing of the onload event
              if (++loaded == 1) {
                  return;
              }
      
              // you can also alert('Done!') here :)
              document.body.removeChild(iframe);
          };
      
      var form = document.createElement('form');
          form.method = "POST";
          form.action = "http://requestb.in/sbnc0lsb?nocache=" + Math.random();
          form.target = iframe.name;
      
      var textarea = document.createElement('textarea');
          textarea.name = 'source';
          textarea.value = html;
      
      form.appendChild(textarea);
      iframe.appendChild(form);
      
      document.body.appendChild(iframe);
      
      form.submit();
      

      })(); ```

    1. Sanitizing iframes

      ```html

      <iframe id="webpage"></iframe>

      <br/> <button onclick="sanitize()">Sanitize</button>

      <script> function sanitize() { // Create a sanitizer object with the default config const sanitizer = new Sanitizer(); // Find the iframe node const iframe = document.getElementById('webpage'); // Sanitize the iframe's document node const sanitizedFrameNodes = sanitizer.sanitize(iframe.contentWindow.document); iframe.replaceChildren(sanitizeFrameNodes); } </script>

      ```

    1. In a clickjacking attack, the attacker creates a malicious website in which it loads the authorization server URL in a transparent iframe above the attacker’s web page. The attacker’s web page is stacked below the iframe, and has some innocuous-looking buttons or links, placed very carefully to be directly under the authorization server’s confirmation button. When the user clicks the misleading visible button, they are actually clicking the invisible button on the authorization page, thereby granting access to the attacker’s application. This allows the attacker to trick the user into granting access without their knowledge.

      Maybe browsers should prevent transparent iframes?! Most people would never suspect this is even possible.

  8. Jun 2022
  9. May 2022
    1. If the media resource is embedded (for example in a iframe), Media Session API information must be set from the embedded context. See snippet below.

      ```html

      <iframe id="iframe"> <video>...</video> </iframe> <script> iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({ title: 'Never Gonna Give You Up', ... }); </script>

      ```

  10. Aug 2020
    1. ⚠️ Данный способ работает, если iframe находится на вашем домене.

  11. May 2020
  12. Nov 2018
  13. Jul 2015