toolness / p5.js-widget

A reusable widget for embedding editable p5 sketches in web pages.
https://toolness.github.io/p5.js-widget/
GNU Lesser General Public License v2.1
161 stars 44 forks source link

Widget should use same protocol as embedding page #42

Closed toolness closed 8 years ago

toolness commented 8 years ago

I forced the URL in the widget snippet to https in the docs because protocol-relative URLs are now an anti-pattern, but I realized that this means that the IFRAME created will be HTTPS instead of HTTP.

Unfortunately, this means that any files the user tries to load, such as via loadJSON(), will fail if the protocol isn't HTTPS due to mixed-content warnings. Indeed, the example sketch on the documentation for loadJSON() fails with just that problem:


var weather;
function preload() {
  var url = 'http://api.openweathermap.org/data/2.5/weather?q=London,UK'+
   '&APPID=7bbbb47522848e8b9c26ba35c226c734';
  weather = loadJSON(url);
}

function setup() {
  noLoop();
}

function draw() {
  background(200);
  // get the humidity value out of the loaded JSON
  var humidity = weather.main.humidity;
  fill(0, humidity); // use the humidity value to set the alpha
  ellipse(width/2, height/2, 50, 50);
}

Changing the widget URL to be protocol-relative fixes this problem.