Externally translated website not loading Style CSS (due to fingerprint integrity check)

[idarek]

I am trying to pass a link to a website made with Hugo to a Google Translator (as per How to get a link to a Google Translate translation?)

http://translate.google.com/translate?js=n&sl=auto&tl=destination_language&u=http://example.net

Trying to implement just a a href link to translate it with dynamic parameters. The problem that I am facing (on all website that I made with hugo), when I put it through, the site is not loading Style CSS and all look ugly.

Example:

http://translate.google.com/translate?js=n&sl=auto&tl=en&u=https://dariusz.wieckiewicz.org/en/

I think, that this is due to the way how I am loading styles on the website, which is as follow

  {{ $style := resources.Get "css/style.css" | minify | fingerprint }}
  <link rel="stylesheet" type="text/css" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media='all'>

Integrity attribute is to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

I like fingerprinting, and don’t want to give up on that, but also would like to have the option to through the site through Google Translator or other services with proper style.

Any advice?

I can simply drop integrity leaving everything else, but is there better approach?

[pamubay]

it’s new to me that google translate now served translated page from it’s own custom domain.

From:

https://dariusz.wieckiewicz.org/en/

Served by google translate:

https://dariusz-wieckiewicz-org.translate.goog/....

Not expert in this topic, but

1. Does it work if you use .RelPermalink instead of .Permalink for your resources? Does SRI allows resources to use relative link?

when i see the console log error, looks like it’s more about the CORS than the SRI itself.

Subresource Integrity: The resource ‘https://dariusz.wieckiewicz.org/css/style.min.34ac59fa0708998b3fdd9b5828fa07efe27f5371d7716a5cf184f45b1d91a5db.css’ has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

2. From MDN, Cross-Origin Resource Sharing and Subresource Integrity

For subresource-integrity verification of a resource served from an origin other than the document in which it’s embedded, browsers additionally check the resource using Cross-Origin Resource Sharing (CORS), to ensure the origin serving the resource allows it to be shared with the requesting origin. Therefore, the resource must be served with an Access-Control-Allow-Origin header that allows the resource to be shared with the requesting origin; for example:

Access-Control-Allow-Origin: *

Subresource Integrity - Security on the web | MDN

or set it with specific origin:

Access-Control-Allow-Origin: https://dariusz-wieckiewicz-org.translate.goog

Access-Control-Allow-Origin - HTTP | MDN

[idarek]

Thank you for your very useful response. That will make me think.

[pitifi9191]

@idarek

n&u=https://dariusz.wieckiewicz.org/en/

why not just use api to pregenerate all these pages cost me around 0.8 / site on average. Are you aware of Hugo get remote?

thanks

[idarek]

For what I need that, I just want a link that will point to google translate. Simple and get what I want, so don’t want to get this more complicated, when I don’t need it.

[idarek]

For curious people here is an example in action:

1. For post that doesn’t have Translated part there is a Translate button that works nicely with the whole website:
   
2. For post that has translated page it displays like that: