CORS issues on Nginx

I still can't figure out what the problem is, Access-Control-Allow-Originbut there is a way to run the comment script, which solves the problem, but not as expected, so this is more of a workaround.

The problem is solved by passing the script all the parameters it needs in the URL and having it read them from there, because it's its own URL and not the parent window's.

on the blog

So first we see that Disqus needs four parameters:

1. shortname- which is the name of the site or forum as they call it.
2. url- which is the URL of the page or entry or post or article
3. title- which is the title of the page
4. identifier- which is a unique identifier (in my case it's a UUID, but it can be the slug or the idor any unique field).

All this data is encoded, in Django with the filter urlencode:''or with the urlencode()PHP function.

With these parameters I call the Disqus page. In Django it looks like this:

<div class="mb4 px3">
  <amp-iframe
    width="600"
    height=400
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
    frameborder="0"
    src="https://disqus.toledano.org/disqus.html?shortname=toledano&url={{ config.SITEURL|urlencode:'' }}{{ article.get_absolute_url|urlencode:'' }}&title={{ article.title|urlencode:''|iriencode }}&identifier={{ article.idx|urlencode:'' }}">
  </amp-iframe>

Which transforms into:

<div class="mb4 px3">
  <amp-iframe
    width="600"
    height=400
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
    frameborder="0"
    src="https://disqus.toledano.org/disqus.html?shortname=toledano&url=https%3A%2F%2Fyo.toledano.org%2Fdesarrollo%2Fagrupar-resultados-con-mysql%2F&title=Agrupar%20resultados%20con%20MySQL&identifier=d09a0882-74a2-4d66-97d8-63e37172a1b4">
  </amp-iframe>
</div>

in the script

Now in the script underwent some modifications. The official documentation says that we need the object disqus_configto be formed like this:

var disqus_config = function () {
  this.page.url = window.location;
  this.page.identifier = window.location.hash;
};

But since we don't have access to that information, we'll use a helper.

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

This function takes the second substring from the location, on the line

var query = window.location.search.substring(1);

and places it in the variable query:

cadena 1: https://disqus.toledano.org/disqus.html?
cadena 2: shortname=toledano&url=https%3A%2F%2Fyo.toledano.org%2Fdesarrollo%2Fagrupar-resultados-con-mysql%2F&title=Agrupar%20resultados%20con%20MySQL&identifier=d09a0882-74a2-4d66-97d8-63e37172a1b4

On the next line:

var vars = query.split("&");

creates an array by dividing the string queryby the ampersand .

In the cycle for, this array is traversed to find the value that contains the variableindicated one.

  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }

Come back falseif you don't find what you're looking for.

Now the object disqus_configis formed by calling this helper function with the variable that is required in each case:

var disqus_config = function () {
  this.page.url = decodeURIComponent(getQueryVariable("url"));
  this.page.identifier = decodeURIComponent(getQueryVariable("identifier"));
};

The solution is on a GitHub case with a full example for use with the Automatic AMP plugin , if you're interested.

PS: I still don't understand why headers and CORS don't work.

It's not really an en problem CORS, Ngnixbut rather a security measure implemented by browsers known asSame-Origin Policy

The same-origin policy is an important security measure for scriptsthe client side (almost always JavaScript). This policy comes from the web browser Netscape 2.0, and prevents a document scriptloaded from one "source" from being loaded or document properties modified from a different "source". This is one of the most important security concepts in modern browsers.

The solution provided by browsers to allow communication between documents of different is Window.postMessage().

security issues

If you don't expect to receive messages from other sites, don't add any events for message. This is a completely foolproof way to avoid security issues.

If you expect to receive messages from other sites, always verify the identity of the sender using the originand possibly the sourcesource. Any window ( eg http://mal.example.com ) can send a message to any other window and there is no guarantee that an unknown sender will not send malicious messages. However, after verifying the identity, you should always check the syntax of the received message . Otherwise, a security hole in the site that you trusted to send only trusted messages could open a cross-site scripting hole in your site.

Example:

Parent document:

<iframe id="iframe" src="https://media.toledano.org" sandbox="allow-scripts"></iframe>
<script>
  var iframe = document.getElementById('iframe');

  // Cuando el documento hijo se termina de cargar
  iframe.addEventListener('load', function() {
    var dataIdx = document.getElementById('content').attributes["data-idx"].value;
    iframe.contentWindow.postMessage(dataIdx, 'https://media.toledano.org');
  });

  // OPCIONAL Esperamos la confirmación del documento hijo
  window.addEventListener('message', function (evt) {

    // Se debe verificar el origen del mensaje es de la fuente esperada
    if (evt.origin !== 'https://media.toledano.org') {          
      return ;
    }

    // ACA ... lógica para el proceso de la confirmación
  });
</script>

Child document:

<script>
  // Escuchamos el mensaje del padre
  window.addEventListener('message', function (evt) {
    var dataIdx = evt.data;

    // Se debe verificar el origen del mensaje es de la fuente esperada
    if (evt.origin !== 'https://yo.toledano.org') {          
      return ;
    }

    // OPCIONAL responder que recibimos el mensaje
    evt.source.postMessage('gracias!', evt.origin);

    // ACA ... lógica que requiere el data-idx
  });
</script>