mirror of https://gitlab.com/curben/blog
feat: add alt attribute to <img>
* https://support.google.com/webmasters/answer/114016?hl=en * remove version tag from cloudinary link * cache of previous version should be purged by now * img tag doesn't need to be self-closing
This commit is contained in:
parent
15048c2d1f
commit
e312ed2b69
|
@ -18,23 +18,23 @@ Firefox can restrict the referrer to the same origin only ([docs](https://wiki.m
|
||||||
|
|
||||||
When you try to login to AliExpress, the login box is just blank.
|
When you try to login to AliExpress, the login box is just blank.
|
||||||
|
|
||||||
{% cloudinary 20190228/no-login.png %}
|
{% cloudinary '20190228/no-login.png' 'Blank aliexpress login box' %}
|
||||||
|
|
||||||
In the new design, the loading wheel just keeps spinning.
|
In the new design, the loading wheel just keeps spinning.
|
||||||
|
|
||||||
{% cloudinary 20190228/invalid-login.png %}
|
{% cloudinary '20190228/invalid-login.png' 'Aliexpress login pop-up keeps loading' %}
|
||||||
<br />
|
<br />
|
||||||
{% cloudinary v1556526937/20190228/invalid-login-ani.webp %}
|
{% cloudinary '20190228/invalid-login-ani.webp' 'Screenrecord of aliexpress troubled login' %}
|
||||||
|
|
||||||
Upon inspection on the blank element (right click on the blank login and select `Inspect Element`), the login box is an iframe of `https://passport.aliexpress.com`. From the Web Console (`Ctrl + Shift + K`), the following error message suggested it's caused by [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
|
Upon inspection on the blank element (right click on the blank login and select `Inspect Element`), the login box is an iframe of `https://passport.aliexpress.com`. From the Web Console (`Ctrl + Shift + K`), the following error message suggested it's caused by [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
|
||||||
|
|
||||||
{% cloudinary 20190228/iframe.png %}
|
{% cloudinary '20190228/iframe.png' 'Aliexpress login page under an iframe' %}
|
||||||
<br />
|
<br />
|
||||||
{% cloudinary 20190228/x-frame.png %}
|
{% cloudinary '20190228/x-frame.png' 'Console error of Aliexpress login' %}
|
||||||
|
|
||||||
From the Network inspection (`Ctrl + Shift + E`), `https://passport.aliexpress.com` has HTTP header `x-frame-options: SAMEORIGIN` (which I believe stems from the `XOriginPolicy` setting). This restricts the iframe to the same domain. This caused the iframe unable to load because it's different from the login page `https://login.aliexpress.com`.
|
From the Network inspection (`Ctrl + Shift + E`), `https://passport.aliexpress.com` has HTTP header `x-frame-options: SAMEORIGIN` (which I believe stems from the `XOriginPolicy` setting). This restricts the iframe to the same domain. This caused the iframe unable to load because it's different from the login page `https://login.aliexpress.com`.
|
||||||
|
|
||||||
{% cloudinary 20190228/sameorigin.png %}
|
{% cloudinary '20190228/sameorigin.png' 'Aliexpress x-frame-options is sameorigin' %}
|
||||||
|
|
||||||
**Edit:** After pinpoint the issue to `XOriginPolicy`, I suspect AliExpress sends the referrer from `login` to `passport` for tracking purpose, and somehow `passport` could not be loaded if it does not receive any referrer. There are a few options to resolve this.
|
**Edit:** After pinpoint the issue to `XOriginPolicy`, I suspect AliExpress sends the referrer from `login` to `passport` for tracking purpose, and somehow `passport` could not be loaded if it does not receive any referrer. There are a few options to resolve this.
|
||||||
|
|
||||||
|
@ -42,9 +42,9 @@ From the Network inspection (`Ctrl + Shift + E`), `https://passport.aliexpress.c
|
||||||
|
|
||||||
To use the old login page, mouse-over on the **Account** link at the top right corner and click on **My Orders**. It should redirects to `https://login.aliexpress.com/...`
|
To use the old login page, mouse-over on the **Account** link at the top right corner and click on **My Orders**. It should redirects to `https://login.aliexpress.com/...`
|
||||||
|
|
||||||
{% cloudinary 20190228/my-orders.png %}
|
{% cloudinary '20190228/my-orders.png' "Aliexpress 'My Orders' link" %}
|
||||||
<br />
|
<br />
|
||||||
{% cloudinary v1556526936/20190228/my-orders-ani.webp %}
|
{% cloudinary '20190228/my-orders-ani.webp' "Screenrecord of Aliexpress 'My Orders' link" %}
|
||||||
|
|
||||||
## Reset XOriginPolicy
|
## Reset XOriginPolicy
|
||||||
|
|
||||||
|
@ -60,11 +60,11 @@ To use the old login page, mouse-over on the **Account** link at the top right c
|
||||||
https://passport.aliexpress.com/*
|
https://passport.aliexpress.com/*
|
||||||
```
|
```
|
||||||
|
|
||||||
{% cloudinary 20190228/whitelist.png %}
|
{% cloudinary '20190228/whitelist.png' "Add a whitelist to 'Ignore X-Frame-Options'" %}
|
||||||
|
|
||||||
That's how the whitelist works on the extension; you add the domain of the iframe not the page's domain. After you add it to the list, refresh the page and you should see the login.
|
That's how the whitelist works on the extension; you add the domain of the iframe not the page's domain. After you add it to the list, refresh the page and you should see the login.
|
||||||
|
|
||||||
{% cloudinary 20190228/login.png %}
|
{% cloudinary '20190228/login.png' 'Regular Aliexpress login page' %}
|
||||||
|
|
||||||
## Direct link
|
## Direct link
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,20 @@
|
||||||
/*
|
/*
|
||||||
* Put {% cloudinary folder/filename.jpg %} in your post.
|
* Put {% cloudinary 'folder/filename.jpg' 'description' %} in your post.
|
||||||
* Change the username in data-src tag,
|
* Change the username in data-src tag
|
||||||
* and cloud name in layout/_partial/after-footer.ejs
|
* and cloud name in typing.js
|
||||||
* src is an animated svg generated from https://loading.io/
|
* src is an animated svg generated from https://loading.io/
|
||||||
* More info:
|
* More info:
|
||||||
* https://hexo.io/docs/tag-plugins
|
* https://hexo.io/docs/tag-plugins
|
||||||
* https://hexo.io/api/tag
|
* https://hexo.io/api/tag
|
||||||
* https://cloudinary.com/documentation/responsive_images
|
* https://cloudinary.com/documentation/responsive_images
|
||||||
*/
|
*/
|
||||||
hexo.extend.tag.register('cloudinary', (fileName) => {
|
hexo.extend.tag.register('cloudinary', (args) => {
|
||||||
return '<img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_500/' + fileName + '" src="/svg/loading.svg" />'
|
const fileName = args[0]
|
||||||
|
let alt = ""
|
||||||
|
|
||||||
|
if (args[1]) {
|
||||||
|
alt = args[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
return '<img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_500/' + fileName + '" src="/svg/loading.svg" alt="' + alt + '">'
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue