When a browser receives the initial root HTML page, how does it determine exactly which other objects should be requested. Is there a list of HTML tags that the browser will always request the associated content from the server when they are detected?
I realize the need to implement an HTML parser for this, however I am not sure of all the individual tags and attributes that are important.
Browsers parse the HTML, and know which elements (with which attributes) require additional resources to be loaded.
i.e. They implement an HTML parser.
Related
Is it possible to embed HTML within a URL and then render that HTML in the browser itself?
In theory, what 'm thinking of works similarly to an URL like below:
http://"<h1>Hello World</h1>"
this would show a page with "Hello World" wrapped in a <h1> tag.
Of course, I understand that the above does not work in the real world for a wide range of reasons. Is there however a a way in which I can encode data within a URL and show render that data as HTML within the browser?
I understand that you could easily set up a webserver to do this, but I am interested in a solution which would work natively without any dependencies.
It's Data URL. Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as "data URIs" until that name was retired by the WHATWG.
Data URLs are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.
Syntax:
data:[<mediatype>][;base64],<data>
The HTML:
Test
This is what a data url does.
Go to welcome page
I know that we can use the <form action="location" method=POST(or GET)> tag to send data back to the server by giving it a action and method attribute. My question is, what other HTML tags let you do the same(let you send user input back to the server)? and can we specify the method="GET or POST" and action attribute in other tags or can they only be used with the tag.
The <form> element is the de-facto element to send data to a web server (via the attributes that you mentioned as well as all of the other child input-related elements within the form).
Outside of the pure-HTML space, the options expand quite a bit in terms of the flexibility for how your client can interact with the server (e.g. leveraging AJAX, the Fetch API, etc.) by reading forms, arbitrary elements, and more.
In our site we have product detail pages built with vuejs which include some non-standard HTML elements. e.g. we have the following to show the average rating for a product
<rating :stars="5"
:rating="#Model.Rating"
size="'large'"></rating>
Vuejs then transforms the above markup within the browser to show a number of star icons, producing quite different HTML markup for the browser.
We need to add support for Schema.org. Is it ok to add the itemprop="ratingValue" attribute to the above element e.g.:
<rating :stars="5"
:rating="#Model.Rating"
size="'large'"
itemprop="#Model.Rating"></rating>
or does Microdata require that the attributes are placed on standard HTML elements?
Take a look at https://ssr.vuejs.org/en/
Note that as of now, Google and Bing can index synchronous JavaScript
applications just fine. Synchronous being the key word there. If your
app starts with a loading spinner, then fetches content via Ajax, the
crawler will not wait for you to finish. This means if you have
content fetched asynchronously on pages where SEO is important, SSR
might be necessary.
If you render your content server side your schema.org tags will work, but if the content which contains your tag is rendered after an API request or other asynchronous actions then a search engine will not be able to see your tags.
Note: itemprop="#Model.Rating" is probably not going to do what you want, you probably want to :itemprop="#Model.Rating" or else you're going to get the literal #Model.Rating as the value of itemprop.
If I use a data URI to construct a src attribute for an HTML element, can it in turn have another data URI inside it?
I know you can't use data uri's for iframes (I'm actually trying to construct an OSDX document and pass it to the browser with an icon encoded in base64 but that's a really niche use case and this is more of a general question), but assuming you could, my use case would look like:
var iframe = document.createElement('iframe');
var icon = document.createElement('image');
var iSrc = 'data:image/png;base64,/*[REALLY LONG STRING]*/';
iframe.src='data:text/html,<html><body><image src="'+iSrc+'" /></body</html>
document.body.appendChild(iframe);
Basically what I'm after is is there anything in a data uri that would break a parent data uri?
Yes you can. I really thought it was impossible, as did everyone I asked.
Example:
Pasting the following into your browser's URL bar should render a gmail logo in an html page that says hello world.
data:text/html,<html><body><p>hello world</p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAz1BMVEX///+6xs7iTULj5+vW2tzk49TX3+Tq6tz09Orz9/jm7O6wu8aNm6WwMCjfRDnm5ube2Mmos7vt7++jrLP29/eyTk3d4+fj6+foWFLM1t2bNzeZpa2trKPv8/ajo6Xud2f0r6rv7uG3ubvd6eXIysq9s6jeopfSUknx8fHbXGKvTx7Hz9X09PTwhXHw9Pb++/fp7/Xu4d3SZlPSiXjuaFmMkZX39/vZy6/j8+v2+/v76uP7+/v0/Pewl4raMi/f5+7KTjitf4W2rI3/9vDzz8uC91bdAAAAAXRSTlMAQObYZgAAAmBJREFUeF6VldeunDAQQNeF3jvbe729p/f//6aMxzaBKHe5OZiVJY6OBvbBAyTvZaDJSy/xzpJ4pdJzz1tfOme5LD0vly45fETe4/1vUoK26bnPznUPzrPrmSJsgtrPpQnpPCmvp2/gukyE/HX6JtYor9/kpqUcY3ogvUxv5RhlSrbHenFzY/+0cxtYApZlGZod3W9JaqJspuSR1vTqw41U4UZb+S/zMAz35FbJt4QK6sUnW+naxWwoaJXBpBi37bxTjuchyl+0zLGs4npmVK1dHSLBiLhmlg+chLukFiLqV3dQ1i84p1SEv42CgLhYzmR5vqh1XIUXeypGoN+LAMoVz5yBk/EKZfsOQioOsnGFWXr/eXLCMs9EeehK2bab+NKCbQj2/mEymRSjpqzkR5CXOv4AWSqyM3BnRSDKw255CWtBW0BWcILyCmQsMywv5b/xS8WpzGJZzMywPFZjvANTYO10VoNfIxqOW2WlwhU/QnbSMDu1y0yWpSowdiqry6OArEW5ka1GNTaGsWqViwDL4z/lezClu4nBN+K/ypWSIywrNY4NxaqZWZSjThlEkQXLUna8lTZ+unWnDE6T1fbmtZlBxWxbFvHZ5NR8DUeUj5QejQ1mu24cv2C5aJW3R3qv1a4bX8TbIih+wAv6IPvDKCIrAusV8FEpyz5njFUV/ERdWFTBHVWwmGkyKKPcT2kyjvKFy1jPgnJ6IeTMg30vzCUZHBTc52mvzdKhz+GYcJIxTw8ukOKlVmd/SPk4kSdQ4nv8fJh7PriIw7Mn/yxPGW8dm06e269eOTwe/De/AW24fWb7B21TAAAAAElFTkSuQmCC" /></body></html>
or for a shorter example courtesy of Pumbaa80:
data:text/html,<script src="data:text/javascript,alert('hello world')"></script>
MSDN explicitly supports this:
Data URIs can be nested.
An old blog entry talks a little bit more about embedding images within CSS using data: :
Neither dataURI spec nor any other mentions if dataURI’es can not be nested. So here’s the testcase where dataURI’ed CSS has dataURI’ed image embedded. IE8b1, Firefox3 and Safari applied the stylesheet and showed the image, Opera9.50 (build 9613) applies the stylesheet but doesn’t show the embedded image! So it seems that Opera9 doesn’t expect to get anything embedded inside of an already embedded resource! :D
But funny thing, as IE8b1 supports expressions and also supports nested data URI’es, it has the same potential security flaw as Firefox does (as described in the section above). See the testcase — embedded CSS has the following code: body { background: expression(a()); } which calls function a() defined in the javascript of the main page, and this function is called every time the expression is reevaluated. Though IE8b1 has limited expressions support (which is going to be explained in a separate post) you can’t use any code as the expression value, but you can only call already defined functions or use direct string values. So in order to exploit this feature we need to have a ready javascript function already located on the page and then we can just call it from the expression embedded in the stylesheet. That’s not very trivial obviously, but if you have a website that allows people to specify their own stylesheets and you want to be on the safe side, you have to either make sure you don’t have a javascript function that can cause any potential harm or filter expressions from people’s stylesheets.
We are building an image carousel, it displays clickable thumbnails that when clicked, displays the actual image. We therefore need both url to appears in the Html. Since there is no "actualImageUrl" attribute defined in the img tag, we figured out that we could build the thumbnail url like this : /thumb.png?altUrl=actualImageUrl.png. The server does not care of the actualImageUrl querystring param and we can use javascript to parse the scr attribute and figure out the actualImage Url.
How W3C valid is this ?
Changing the URL of the src attribute is perfectly valid - But you could use the data- attribute - new with HTML5 (although that doctype is not a requirement to use them) and its purpose is exactly this, from the specs :
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
w3 specs for custom attributes
Note - you can test validation here
Anything is valid as a src attribute value, in the XHTML meaning for “valid” (a formal thing). It is also otherwise correct to have a query part in such a value and use it in client-side scripting.
But it might be unnecessarily complicated. As you are working with client-side JavaScript, you could include the URLs in a JavaScript array or object, instead of putting them anywhere in HTML markup. For example, you could use an object with thumbnail image URLs as property names and full image URLs as corresponding values, like
var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }
And you would then use this object to pick up the full image URL when a thumbnail is clicked on.
For a more robust solution, which would work even when JavaScript is disabled, you would need to generate the code server-side, generating a elements around img elements.