H5&CSS Basic —— 067. Look At JsonP before publish (Not translated)
»
001. Free HTTPS Certificate
002. About The Column
003. Visible Area of Browser
004. Why ReactJs
005. Prohibit mobile scaling
006. EM in H5
007. Space width in page
008. H5 Special Characters
009. H5 Restricting Input
010. H5 Font
011. nginx redirection configuration
012. Text Indentation
013. Flex Layout
014. Gradient Borders
015. Common DOM Operations
016. Media Query
017. CSS Selectors
018. CSS alternate lines color
019. fetch
020. JS Attributes Operation
021. scroll div
022. JS for Loop
023. Prohibit Text Selection
024. Precision Controled Float Output
025. Ionic Full Screen
026. SVG Circle
027. SVG Ellipse
028. SVG Arc
029. SVG Elliptical Sector
030. Using WebAssembly
031. JS Checklist checkbox Operation
032. SVG Bezier Curve
033. Threejs Material
034. Luminous Image Styles
035. Web Animation Points
036. CSS Gradient Fonts
037. SVG Rectangle
038. Development Ability for Remuneration
039. Close Browser Default Style for Input
040. Jet Tail Particle Animation
041. Prohibit Desktop Browser Scaling JS
042. Desktop Full Screen Web CSS
043. Display images in self scaling aspect ratio div
044. Bi-side Text Alignment Styles
045. Single line ellipsis
046. Multi-line ellipsis
047. Font Transformation Styles
048. Remove default style of a tag
049. Chinese Characters: Full Width Space
050. DIV lays on DIV
051. Calculating 1rem Pixel Values in JS
052. JS Operations of DOM Parent Nodes and Adjacent Nodes
053. Absolute Coordinates of DOM Elements in JS
054. ToolTips Div
055. Height and Width in JS
056. Nginx configuration for stream media
057. Scroll Bar Style
058. Common Methods for JS Array Operations
059. SVG Fill Style Definition
060. SVG Stroke Style Definition
061. SVG Drawing Lines
062. CSS Background Images Splicing
063. WebSocket
064. JS Calculate DPI
065. GIF Opacity or not
066. Nginx solved CORS problem
067. Look At JsonP before publish
068. Center and Middle Content in Div
069. CSS background image size keeping ratio
070. CSS Frame Animation
071. CSS Same Width Font Display
072. Package
    我们知道https网站浏览器的ajax有同源限制。那么,应该如何让一个https的网站请求到其他协作网站的json数据呢?

    方法有几种:
    1、使用自己网站的nginx代理协助网站的服务器的接口。
    2、使用<script>标签及jsonp去请求有跨域限制的网站接口(适用于任何https服务器)。
    3、如果网站是http协议而不是https协议,则直接要求协作网站在协作网站加入头:Access-Control-Allow-Origin:*并且配置http协议就可以让非同源的任何页面的ajax请求到自身的接口。如果要避免使用这种方法来请求自身的任何数据,也只需要关闭http接口改用https,或者去除代理服务器的:Access-Control-Allow-Origin:*头即可。

    以上方法中,方法3需要协作网站的配合,方法1需要后端代理服务器的配置。只有方法2是单单靠前端就能完成和实现的。
    而使用JsonP显示协作网站的数据的关键点在于协作网站的返回内容上必须是一个方法的调用代码。

    如果协作网站同意后端返回如下的字符串:webpageFunction([{"name":"Alex","original Name":"Eric"}]);
    那么,协作网站的后端数据[{"name":"Alex","original Name":"Eric"}]就有可能让当前https网站使用。
    这种可能只要在当前网站定义函数webpageFunction(json){}来显示数据即可。

    对于js的CDN,经过百度AI的问答,发现CDN上的JavaScript可以做任何事,只要CDN配置:Access-Control-Allow-Origin:*或者Access-Control-Allow-Origin: v-signon.com就能接收非自身域名下的<script>标签请求。因为,https的同源限制只在于使用https协议的ajax请求时浏览器的XMLHttpRequest请求上做了同源的判断。

    虽然,JsonP显示协作网站的数据需要协作网站返回一个特殊的字符串。但是,您有没有发现:在https协议下,通过<script><img><link>标签仍然可以跨域地请求js文本内容、图片和css文件。如果在请求的url上拼接上参数传递给经过伪装的CDN服务器,那样是不是很可怕?

    所以,按照规范的开发过程,所有的前端引入的js、img、css都需要做安全性验证,以防止本站数据的向外发送,也就是搜索一遍"<script"、“<img”、"<link"以及“http”和“https”,看看众多js代码中有没有引入其他网站的接口的。
    检查完以上的搜索内容后,还需要进一步防止恶意js代码通过拼接字符串来实现"<script"、“<img”、"<link"标签的引入。也就是搜索"eval"、"document.write"以及"innerHTML",查看有没有相关的恶意代码调用。

    好了,网页页面还是推荐使用纯JS函数加自定义函数,后台系统还是推荐jQuery框架(如果没有其他用简单的几个文件写完的js框架的话)。
«
--Alex.Zhang
--www.v-signon.com Learningers Co-Encouraged
Back
Personal Art: www.up-task.com Unit: Individual
中文 Русский 京ICP备19038994号-2
If the content on this website infringes upon your any rights, please contact me at 1307776259@qq.com for removal