Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embedded video not rendering in Chrome on first load after embed code is saved to a Rails model

We have an Ruby on Rail app that allows the user to save a number of video embed codes into a into our data model. The form allows the user to enter any number of embed codes, press submit and save everything to the database. The app then redirects the user to a page that has a list of all the embed codes.

This workflow works fine for IE, Safari, and Firefox.

On Chrome, however, the first time the page is loaded none of the videos appear on the page. I see the following error in the console, once for each video:

Refused to execute a JavaScript script. Source code of script found within request.

On subsequent page loads, the videos load fine and that error is not displayed.

When I view source, the page is reloaded for the view-source operation so I cannot tell if the source is coming through as expected.

When I inspect element on the block where the video should be, I see the following:

<iframe src="" width="400" height="225" frameborder="0">
  <html>
    <head></head>
    <body></body>
  </html>
</iframe>

This occurs for both the iframe style embed codes as well as for the "old-style" tag code for both YoutTube and Vimeo videos.

Related:

  • Refused to execute a JavaScript script. Source code of script found within request
like image 259
Dave Jensen Avatar asked Jul 27 '11 00:07

Dave Jensen


People also ask

Why are my embedded YouTube videos not working?

Other things you can try: Reload the video at a later point in time or immediately. Update the Adobe Flash Player. Upgrade your browser. Delete cache and cookies.

How do I get the embed code from a video file on my computer?

On a computer, go to the YouTube video or playlist you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.

What is the code to embed a video?

To embed a video in an HTML page, use the <iframe> element. The source attribute included the video URL. For the dimensions of the video player, set the width and height of the video appropriately.

What does embed a code mean?

Embed means to integrate external content into another website or page. You embed something when you place a block of code — called an embed code — into the HTML editor of another website. When you hit 'Save' or 'Publish,' the media then renders on the published page. Embedded content is referenced with HTML.


2 Answers

It's how Chrome prevents XSS (cross-site scripting), as your reference above.

When you submit your embed codes, and redirect to another page to display them, Chrome sees that the submitted embed codes (via HTTP POST))and the responded embed codes are the same, so it prevents to load them and displays error in the console.

When you refresh the page, no more HTTP POST submitted (because you redirected it before), so it should display correctly.

I have same problem, and I resolved it by auto reloading the page after it redirected.

like image 176
Son Nguyen Avatar answered Sep 24 '22 21:09

Son Nguyen


I reload the iframes via javascript (with jquery) as workarround..

I therefore store the src elsewhere cause chrome removes it..

I added the url twice as src and src2, and reloaded then with src2.

I also gave all the iframes that need reloading a special class 'webkitIframeHack'.

<script type="text/javascript">
$(function(){
    if ($.browser.webkit) {
        $("iframe.webkitIframeHack").each(function(){
            $(this).attr('src', $(this).attr('src2'));
        });
    };
});
</script>

(I can't use html5 data-* attributes, i think they would be more fitted..)

like image 43
Nick Russler Avatar answered Sep 24 '22 21:09

Nick Russler