Embedded video not rendering in Chrome on first load after embed code is saved to a Rails model_问答_开发者

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

开发者 https://www.devze.com 2023-03-22 22:31 出处：网络

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-sour开发者_开发知识库ce 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.

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

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.

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..)