I'm attempting to insert a base url property into some attributes for a .Net master page that I'm building.
The purpose of this attribute insertion is to make sure that I need only change a single value in a config file to change the head portion of a url, thus saving time when I'm moving my program between different servers.
On the code-behind of the master page I have an exposed property 'baseUrl' that stores the current base location path of the running program.
When I attempt to add my property into a script tag it looks like this:
<script type="text/javascript" src="<%# strBaseUrl %>/Javascript/Script.js"></script>
This will tend to work with the path changing based on a value I've set elsewhere in config.
However using the property in a similar way for CSS doesn't tend to work:
<link rel="stylesheet" href="<%# strBaseUrl %>/Style/StyleSheets/foundation.min.css">
Instead the string appended before the url doesn't reflect the contents of the 'strBaseUrl' variable and just appears as a set of periods and precentage symbols.
Does anyone know a correct means of concatenating the baseUrl into an HTML attribute for this purpose, that works with the link tag (i.e. CSS)?
This should work
<script type="text/javascript" src="<%=strBaseUrl%>/Javascript/Script.js"></script>
Related
In my AEM project, we have client-side dynamic variable functionality which checks for any strings that are formed inside of a ${ } wrapper. The dynamic variable values are coming from our cookies. Replacing this with a more friendly format that does not conflict with Sightly is not an option at the moment, so please don't tell me to do that :)
When creating an anchor tag in the source editor of the Text core component, I am setting the href as the following: href="/content/en/opt-in.html?hash=${/profile/hash}". The anti-Samy configuration is blocking the href attribute from being rendered on this element, but I have tried to add the following to the overlayed file /apps/cq/xssprotection/config.xml:
<regexp name="expressionURLWithSpecialCharacters" value="(\$\{(\w|\/|:)+\})"/>
<regexp-list>
<regexp name="onsiteURL"/>
<regexp name="offsiteURL"/>
<regexp name="expressionURL"/>
<regexp name="expressionURLWithSpecialCharacters"/>
</regexp-list>
^ inside of the <attribute name="href"> block of common-attributes. Is there something else I need to do in order to make this not be filtered out so that it can be correctly parsed by the global variable replacement? Thanks!
There are two issues here:
The RTE will encode your URL and turn hash=${/profile/hash} into hash=$%7B/profile/hash%7D when storing into JCR
Even if you pass 1, the expression you are trying to use will only match EXACTLY the URL of ${/profile/hash}. You would need to expand the expression to include everything else (scheme, domain/host, path, query etc.). Think onsiteURL and offsiteURL but allowing your expression as well in query parameters. Have a look at https://github.com/apache/sling-org-apache-sling-xss/blob/master/src/main/java/org/apache/sling/xss/impl/XSSFilterImpl.java#L115 to get a starting point.
Have you tried adding disableXSSFiltering="{Boolean}true”?
Vlad, your second point was helpful in that I hadn't considered that one of the regular expressions in the XSS Protection configuration href attribute block needed to match the ${/profile/hash} in addition to the rest of the URL preceding and following it. Although to your first point, the RTE actually did save the special characters as-is into the JCR and did not encode them, probably since I was using the source editor mode and not the inline text editor.
What I ended up doing was creating a new regular expression as follows:
<regexp name="onsiteURLWithVariableExpression"
value="(?!\s*javascript(?::|:))(?:(?://(?:(?:(?:(?:\p{L}\p{M}*)|[\p{N}-._~])|(?:%\p{XDigit}\p{XDigit})|(?:[!$&'()*+,;=]))*#)?(?:\[(?:(?:(?:\p{XDigit}{1,4}:){6}(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:::(?:\p{XDigit}{1,4}:){5}(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:(?:\p{XDigit}{1,4}){0,1}::(?:\p{XDigit}{1,4}:){4}(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:(?:(?:\p{XDigit}{1,4}:){0,1}\p{XDigit}{1,4})?::(?:\p{XDigit}{1,4}:){3}(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:(?:(?:\p{XDigit}{1,4}:){0,2}\p{XDigit}{1,4})?::(?:\p{XDigit}{1,4}:){2}(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:(?:(?:\p{XDigit}{1,4}:){0,3}\p{XDigit}{1,4})?::(?:\p{XDigit}{1,4}:){1}(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:(?:(?:\p{XDigit}{1,4}:){0,4}\p{XDigit}{1,4})?::(?:(?:\p{XDigit}{1,4}:\p{XDigit}{1,4})|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])))|(?:(?:(?:\p{XDigit}{1,4}:){0,5}\p{XDigit}{1,4})?::(?:\p{XDigit}{1,4}))|(?:(?:(?:\p{XDigit}{1,4}:){0,6}\p{XDigit}{1,4})?::))]|(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])\.(?:\p{N}|[\x31-\x39]\p{N}|1\p{N}{2}|2[\x30-\x34]\p{N}|25[\x30-\x35])|(?:(?:(?:\p{L}\p{M}*)|[\p{N}-._~])*|(?:%\p{XDigit}\p{XDigit})*|(?:[!$&'()*+,;=])*))(?::\p{Digit}+)?(?:/|(/(?:(?:\p{L}\p{M}*)|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#)+/?)*))|(?:/(?:(?:(?:\p{L}\p{M}*)|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#)+(?:/|(/(?:(?:\p{L}\p{M}*)|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#)+/?)*))?)|(?:(?:(?:\p{L}\p{M}*)|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#)+(?:/|(/(?:(?:\p{L}\p{M}*)|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#)+)*)))?(?:\?(?:(?:\p{L}\p{M}*)|(\$\{(\w|\/|:)+\})|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#|/|\?)*)?(?:#(?:(?:\p{L}\p{M}*)|[\p{N}-._~]|%\p{XDigit}\p{XDigit}|[!$&'()*+,;=]|:|#|/|\?)*)?"/>
which is just the onsiteURL with my original expressionURLWithSpecialCharacters: (\$\{(\w|\/|:)+\}) value added as a group in the query string parameter section. This enabled AEM to accept this as an href value in my anchor tag.
I appreciate everyone's help!
I use two CSS files, one is a little one for my home.html with all the important things for this page and there I pre fetch a bigger CSS file that takes care of the internal structure.
It works as I want but when I try to pass the W3C validation it complains with:
Error: A link element with an as attribute must have a rel attribute
that contains the value preload.
<link rel="prefetch alternate stylesheet" href="/css/internal.css" as="style">
Can I get rid correctly of this?
is it possible via html to recall a HTML file (template) recall it and just change the value of PHP variable. And by the same way, this template position itself (with css) without any change?
Example: You want to display different objects to sell and the template is set graphically (photo + name + price) and you want to put another one just beside it.
If yes, by Javascript? or else?
Thanks
Using jQuery is very easy.
(1) Link your CSS earlier in the main HTML so when your template loaded the css will automatically applied.
(2) Add jQuery script like <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> or you can download jQuery yourself and use yout own path.
(3) Assume you have <div id="containner"></div> to populate the template later.
(4) When the document load, button click or whenever you want to trigger to load the template simply call $('#containner').load('/path/template.html'); this is jQuery javascript code. the .load() method is an Ajax call to your template file.
(5) Any PHP variables in the template file will be evaluated and will produce html only since at server side.
(6) The returned template will populated in the containner div.
use ajax, the Javascript runs on the client browser can call a server side script and switch page content without refresh the page.
The SRC and HREF attributes are used to include some external entities like an image, a CSS file, a HTML file, any other web page or a JavaScript file.
Is there a clear differentiation between SRC and HREF? Where or when to use SRC or HREF? I think they can't be used interchangeably.
I'm giving below few examples where these attributes are used:
To refer a CSS file: href="cssfile.css" inside the link tag.
To refer a JS file: src="myscript.js" inside the script tag.
To refer an image file: src="mypic.jpg" inside an image tag.
To refer another webpage: href="http://www.webpage.com" inside an anchor tag.
NOTE: #John-Yin's answer is more appropriate considering the changes in the specs.
Yes. There is a differentiation between src and href and they can't be used interchangeably. We use src for replaced elements while href for establishing a relationship between the referencing document and an external resource.
href (Hypertext Reference) attribute specifies the location of a Web resource thus defining a link or relationship between the current element (in case of anchor a) or current document (in case of link) and the destination anchor or resource defined by this attribute. When we write:
<link href="style.css" rel="stylesheet" />
The browser understands that this resource is a stylesheet and the processing parsing of the page is not paused (rendering might be paused since the browser needs the style rules to paint and render the page). It is not similar to dumping the contents of the css file inside the style tag. (Hence it is advisable to use link rather than #import for attaching stylesheets to your html document.)
src (Source) attribute just embeds the resource in the current document at the location of the element's definition. For eg. When the browser finds
<script src="script.js"></script>
The loading and processing of the page is paused until this the browser fetches, compiles and executes the file. It is similar to dumping the contents of the js file inside the script tag. Similar is the case with img tag. It is an empty tag and the content, that should come inside it, is defined by the src attribute. The browser pauses the loading until it fetches and loads the image. [so is the case with iframe]
This is the reason why it is advisable to load all JavaScript files at the bottom (before the </body> tag)
update : Refer #John-Yin's answer for more info on how it is implemented as per HTML 5 specs.
apnerve's answer was correct before HTML 5 came out, now it's a little more complicated.
For example, the script element, according to the HTML 5 specification, has two global attributes which change how the src attribute functions: async and defer. These change how the script (embedded inline or imported from external file) should be executed.
This means there are three possible modes that can be selected using these attributes:
When the async attribute is present, then the script will be executed asynchronously, as soon as it is available.
When the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.
When neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
For details please see HTML 5 recommendation
I just wanted to update with a new answer for whoever occasionally visits this topic. Some of the answers should be checked and archived by stackoverflow and every one of us.
I think <src> adds some resources to the page and <href> is just for providing a link to a resource(without adding the resource itself to the page).
HREF: Is a REFerence to information for the current page ie css info for the page style or link to another page. Page Parsing is not stopped.
SRC: Is a reSOURCE to be added/loaded to the page as in images or javascript. Page Parsing may stop depending on the coded attribute. That is why it's better to add script just before the ending body tag so that page rendering is not held up.
Simple Definition
SRC : (Source). To specify the origin of (a communication); document:
HREF : (Hypertext Reference). A reference or link to another page, document...
SRC(Source) -- I want to load up this resource for myself.
For example:
Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>
Relative URL with img element : <img src="mypic.jpg">
HREF(Hypertext REFerence) -- I want to refer to this resource for someone else.
For example:
Absolute URL with anchor element: Click here
Relative URL with link element: <link href="mystylesheet.css" type="text/css">
Courtesy
A simple definition
SRC: If a resource can be placed inside the body tag (for image, script, iframe, frame)
HREF: If a resource cannot be placed inside the body tag and can only be linked (for html, css)
You should remember when to use everyone and that is it
the href is used with links
<link rel="stylesheet" href="style.css" />
the src is used with scripts and images
<img src="the_image_link" />
<script type="text/javascript" src="" />
the url is used generally in CSS to include something, for exemple to add a background image
selector { background-image: url('the_image_link'); }
after going through the HTML 5.1 ducumentation (1 November 2016):
part 4 (The elements of HTML)
chapter 2 (Document metadata)
section 4 (The link element) states that:
The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link.
does not contain the src attribute ...
witch is logical because it is a link .
chapter 12 (Scripting)
section 1 (The script element) states that:
Classic scripts may either be embedded inline or may be imported from an external file using the src attribute, which if specified gives the URL of the external script resource to use. If src is specified, it must be a valid non-empty URL potentially surrounded by spaces. The contents of inline script elements, or the external script resource, must conform with the requirements of the JavaScript specification’s Script production for classic scripts.
it doesn't even mention the href attribute ...
this indicates that while using script tags always use the src attribute !!!
chapter 7 (Embedded content)
section 5 (The img element)
The image given by the src and srcset attributes, and any previous sibling source element's srcset attributes if the parent is a picture element, is the embedded content.
also doesn't mention the href attribute ...
this indicates that when using img tags the src attribute should be used aswell ...
Reference link to the W3C Recommendation
If you're talking HTML4, its list of attributes might help you with the subtleties. They're not interchangeable.
They are not interchangeable - each is defined on different elements, as can be seen here.
They do indeed have similar meanings, so this is an inconsistency. I would assume mostly due to the different tags being implemented by different vendors to begin with, then subsumed into the spec as is to avoid breaking backwards compatibility.
They don't have similar meanings. 'src' indicates a resource the browser should fetch as part of the current page. HREF indicatea a resource to be fetched if the user requests it.
From W3:
When the A element's href attribute is
set, the element defines a source
anchor for a link that may be
activated by the user to retrieve a
Web resource. The source anchor is the
location of the A instance and the
destination anchor is the Web
resource.
Source: http://www.w3.org/TR/html401/struct/links.html
This attribute specifies the location
of the image resource. Examples of
widely recognized image formats
include GIF, JPEG, and PNG.
Source: http://www.w3.org/TR/REC-html40/struct/objects.html
I agree what apnerve says on the distinction. But in case of css it looks odd. As css also gets downloaded to client by browser. It is not like anchor tag which points to any specific resource. So using href there seems odd to me. Even if its not loaded with the page still without that page cannot look complete and so its not just relationship but like resource which in turn refers to many other resource like images.
src is to used to add that resource to the page, whereas href is used to link to a particular resource from that page.
When you use in your webpage, the browser sees that its a style sheet and hence continues with the page rendering as the style sheet is downloaded in parellel.
When you use in your webpage, it tells the browser to insert the resource at the location. So now the browser has to fetch the js file and then loads it. Until the browser finishes the loading process, the page rendering process is halted. That is the reason why YUI recommends to load your JS files at the very bottom of your web page.
I've noticed that on some websites (including SO) the link to the CSS will look like:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6638">
I would say its safe to assume that ?v=6638 tells the browser to load version 6638 of the css file. But can I do this on my websites and can I include different versions of my CSS file just by changing the numbers?
That loads all.css with a different query string so that if version 6637, for instance, is already cached on your machine, you'll get the new one (6638). Changing that number (in this case) will not give you a different file.
This is just a cache trick so they can send the file down with no expiration (i.e. you never have to ask for it again), because when it does change, the "file name", changes.
That said, you could make it so you load a different version based on the query string parameter. Doing so would be slightly non-trivial and akin to how you get different questions when you pass a different question ID to the URL of this page.