Trouble with html code in Chrome

Community Support
1

With this python code:

from bokeh.plotting import figure
from bokeh.io import show
p = figure(plot_width = 600, plot_height = 600,
           title = 'Example Glyphs',
           x_axis_label = 'X', y_axis_label = 'Y')

# Example data
squares_x = [1, 3, 4, 5, 8]
squares_y = [8, 7, 3, 1, 10]
circles_x = [9, 12, 4, 3, 15]
circles_y = [8, 4, 11, 6, 10]

# Add squares glyph
p.square(squares_x, squares_y, size = 12, color = 'navy', alpha = 0.6)
# Add circle glyph
p.circle(circles_x, circles_y, size = 12, color = 'red')

# Show the plot
show(p)

Running this code in Chrome:

  <meta charset="utf-8">
  <title>Bokeh Plot</title>
      
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.0.0.min.js" integrity="sha384-5Y+xuMRAbgBj/2WKUiL8yzV4fBFic1HJPo2hT3pq2IsEzbsJjj8kT2i0b1lZ7C2N" crossorigin="anonymous"></script>
    <script type="text/javascript">
        Bokeh.set_log_level("info");
    </script>

          <div class="bk-root" id="92bc5757-b2b6-4f6c-950f-8dfa6cbf4a00" data-root-id="1001"></div>
        
      
    
  
  
    <script type="application/json" id="1163">
      {"6705cff8-311f-463b-8e6d-ccf19c5e2a7f":{"roots":{"references":[{"attributes":{},"id":"1017","type":"BasicTicker"},{"attributes":{},"id":"1021","type":"WheelZoomTool"},{"attributes":{"bottom_units":"screen","fill_alpha":0.5,"fill_color":"lightgrey","left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"1052","type":"BoxAnnotation"},{"attributes":{},"id":"1013","type":"BasicTicker"},{"attributes":{"text":"Example Glyphs"},"id":"1002","type":"Title"},{"attributes":{},"id":"1023","type":"SaveTool"},{"attributes":{"fill_color":{"value":"red"},"line_color":{"value":"red"},"size":{"units":"screen","value":12},"x":{"field":"x"},"y":{"field":"y"}},"id":"1039","type":"Circle"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"navy"},"line_alpha":{"value":0.1},"line_color":{"value":"navy"},"size":{"units":"screen","value":12},"x":{"field":"x"},"y":{"field":"y"}},"id":"1035","type":"Square"},{"attributes":{"axis_label":"X","formatter":{"id":"1044"},"ticker":{"id":"1013"}},"id":"1012","type":"LinearAxis"},{"attributes":{},"id":"1048","type":"UnionRenderers"},{"attributes":{"axis_label":"Y","formatter":{"id":"1046"},"ticker":{"id":"1017"}},"id":"1016","type":"LinearAxis"},{"attributes":{"data_source":{"id":"1033"},"glyph":{"id":"1034"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1035"},"selection_glyph":null,"view":{"id":"1037"}},"id":"1036","type":"GlyphRenderer"},{"attributes":{"fill_alpha":{"value":0.6},"fill_color":{"value":"navy"},"line_alpha":{"value":0.6},"line_color":{"value":"navy"},"size":{"units":"screen","value":12},"x":{"field":"x"},"y":{"field":"y"}},"id":"1034","type":"Square"},{"attributes":{"axis":{"id":"1012"},"ticker":null},"id":"1015","type":"Grid"},{"attributes":{"data":{"x":[9,12,4,3,15],"y":[8,4,11,6,10]},"selected":{"id":"1051"},"selection_policy":{"id":"1050"}},"id":"1038","type":"ColumnDataSource"},{"attributes":{"overlay":{"id":"1052"}},"id":"1022","type":"BoxZoomTool"},{"attributes":{"below":[{"id":"1012"}],"center":[{"id":"1015"},{"id":"1019"}],"left":[{"id":"1016"}],"renderers":[{"id":"1036"},{"id":"1041"}],"title":{"id":"1002"},"toolbar":{"id":"1026"},"x_range":{"id":"1004"},"x_scale":{"id":"1008"},"y_range":{"id":"1006"},"y_scale":{"id":"1010"}},"id":"1001","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"1010","type":"LinearScale"},{"attributes":{},"id":"1044","type":"BasicTickFormatter"},{"attributes":{"source":{"id":"1038"}},"id":"1042","type":"CDSView"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"1020"},{"id":"1021"},{"id":"1022"},{"id":"1023"},{"id":"1024"},{"id":"1025"}]},"id":"1026","type":"Toolbar"},{"attributes":{},"id":"1006","type":"DataRange1d"},{"attributes":{},"id":"1049","type":"Selection"},{"attributes":{"data_source":{"id":"1038"},"glyph":{"id":"1039"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"1040"},"selection_glyph":null,"view":{"id":"1042"}},"id":"1041","type":"GlyphRenderer"},{"attributes":{"data":{"x":[1,3,4,5,8],"y":[8,7,3,1,10]},"selected":{"id":"1049"},"selection_policy":{"id":"1048"}},"id":"1033","type":"ColumnDataSource"},{"attributes":{"axis":{"id":"1016"},"dimension":1,"ticker":null},"id":"1019","type":"Grid"},{"attributes":{},"id":"1050","type":"UnionRenderers"},{"attributes":{},"id":"1025","type":"HelpTool"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"red"},"line_alpha":{"value":0.1},"line_color":{"value":"red"},"size":{"units":"screen","value":12},"x":{"field":"x"},"y":{"field":"y"}},"id":"1040","type":"Circle"},{"attributes":{},"id":"1051","type":"Selection"},{"attributes":{},"id":"1008","type":"LinearScale"},{"attributes":{},"id":"1020","type":"PanTool"},{"attributes":{},"id":"1004","type":"DataRange1d"},{"attributes":{},"id":"1046","type":"BasicTickFormatter"},{"attributes":{"source":{"id":"1033"}},"id":"1037","type":"CDSView"},{"attributes":{},"id":"1024","type":"ResetTool"}],"root_ids":["1001"]},"title":"Bokeh Application","version":"2.0.0"}}
    </script>
    <script type="text/javascript">
      (function() {
        var fn = function() {
          Bokeh.safely(function() {
            (function(root) {
              function embed_document(root) {
                
              var docs_json = document.getElementById('1163').textContent;
              var render_items = [{"docid":"6705cff8-311f-463b-8e6d-ccf19c5e2a7f","root_ids":["1001"],"roots":{"1001":"92bc5757-b2b6-4f6c-950f-8dfa6cbf4a00"}}];
              root.Bokeh.embed.embed_items(docs_json, render_items);
            
              }
              if (root.Bokeh !== undefined) {
                embed_document(root);
              } else {
                var attempts = 0;
                var timer = setInterval(function(root) {
                  if (root.Bokeh !== undefined) {
                    clearInterval(timer);
                    embed_document(root);
                  } else {
                    attempts++;
                    if (attempts > 100) {
                      clearInterval(timer);
                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                    }
                  }
                }, 10, root)
              }
            })(window);
          });
        };
        if (document.readyState != "loading") fn();
        else document.addEventListener("DOMContentLoaded", fn);
      })();
    </script>

Gets me to the following error

Access to script at ‘https://cdn.bokeh.org/bokeh/release/bokeh-2.0.0.min.js’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Instead in Edge browser runs correctly.

I would like to know if there is anything i can do.

Thank you in advice.

Josu

2

@Josu_Catalina It seems that some browsers may behave differently regarding CORS origin when viewing a local file. We may need to swtich the new SRI integrity hash checks to be opt-in. In the mean time, can you try this for me: load the html from an actual server. E.g you can use the built-in HTTP server of Python and then navigate to the file from a 127.0.0.1 address (instead of file://)

3

This comment on the chrome issue tracker also suggests clearing the chrome cache may help with this situation (but please try what I suggested above first so that we can get diagnostic information)

4

@Josu_Catalina I can repro this in chrome and have some understanding of what’s going on. TLDR if you load BokehJS from CDN first without the SRI/crossorigin attributes, and then later try to load it with, then that is when Chrome complains. I’ll make a more detailed issue soon. Our gallery examples don’t currently use the SRI/crossorigin tags. Did you by chance view a plot in out gallery first, before looking at your local output?

EDIT: here is the issue: [BUG] Potential Chrome CORS problem with local output · Issue #9773 · bokeh/bokeh · GitHub

1 Like
5

Thanks for the solution!