curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

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:
curben 2019-05-23 16:46:02 +09:30
parent 15048c2d1f
commit e312ed2b69
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
source/_posts/aliexpress-no-login-firefox.md
View File

@ -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

17
themes/typing/scripts/cloudinary.js
View File

@ -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 + '">'
}) })