I have a component using the Rich Text Edit widget (xtype="richtext") in my project that's used across the entire site as the default text component.
The users would like to be able to insert phone links using the tel URI scheme into the text entered using this component.
The dialog allows them to do so but when the contents of the Rich Text Edit are rendered in Sightly/HTL later on, the html context is used:
{$text # context='html'}
Once this is done, the value of my attribute is ignored.
The HTML stored in the repository is:
Call us!
And what's actually rendered on the page on the author instance is:
<a>Call us!</a>
on the publish instance, the tag gets removed altogether because of the link checker.
Changing the context to unsafe causes the href to render but it's not a solution I'm willing to accept. The component is used in a lot of places and I want to be sure the XSS protection is sufficient.
Is there a way I can affect the way the html context in HTL treats telephone links?
I tried adding an extra regular expression to the overlay of apps/cq/xssprotection/config.xml:
<regexp name="onsiteURL" value="([\p{L}\p{N}\\\.\##\$%\+&;\-_~,\?=/!]+|\#(\w)+)"/>
<regexp name="offsiteURL" value="(\s)*((ht|f)tp(s?)://|mailto:)[\p{L}\p{N}]+[\p{L}\p{N}\p{Zs}\.\##\$%\+&;:\-_~,\?=/!]*(\s)*"/>
<regexp name="telephoneLink" value="tel:\+?[0-9]+"/>
and further on:
<attribute name="href">
<regexp-list>
<regexp name="onsiteURL"/>
<regexp name="offsiteURL"/>
<regexp name="telephoneLink"/>
</regexp-list>
<!-- Skipped for brevity -->
</attribute>
but that doesn't seem to affect the way the Sightly/HTL escapes strings in the html context.
I've also tried overlaying the Sling xss rules located in /libs/sling/xss/config.xml but had no luck either.
How can it be done?
There are two xss protection config files:
/libs/cq/xssprotection/config.xml
/libs/sling/xss/config.xml
Sightly is using the second one, which means that you need to overlay it at path /apps/sling/xss/config.xml
What is worth mentioning is that new configuration seems to be applied only after restart of your aem instance.
Related
This is the weirdest issue I've ever faced in a long time. I have a URL that is authored inside a multifield. The URL has an underscore eg. http://example.net/_pinkPanther_is_pink it is currently inside ${item.link}
When I do Click <br> ${item.link} and inspect, it renders as
Click
<br> http://example.net/_pinkPanther_is_pink
If you notice both values are coming from the same variable in Sightly still when the link is used inside href of anchor tag there is double underscore added by God know who after example.net/
Does anybody have a clue as to what on earth is going on ?
That's caused by the display context aware XSS protection. Sightly/HTL automatically detects the display context of a HTL expression, using its location within the structure of the HTML page to detect it.
For example, if the expression appears in a place that would produce a text once rendered, then it is said to be in a text context. If it is found within the value of an attribute, then it is said to be in an attribute context, and so forth. More about contexts in the htl specification page.
In your example, the implicit context inside the href attribute is uri while in the later case is text.
In order to overwrite this behaviour, you may explicitly set the context like href="${item.link # context='text'}.
I use TinyMCE 4.1.10 and have a problem with tags inside <a>-tags:
I need to insert code in the following markup inside the code viewer:
<a><h3>something</h3></a>
Generally I want every tag to be possible inside the <a>-tag (besides another <a>-tag).
But TinyMCE does a ridiculous cleanup:
<p><a></a></p>
<h3><a>something</a></h3>
<p></p>
I've already made following modifications in the setup:
extended_valid_elements : "a[*]",//allow empty <a>-tag
valid_children : "+a[div|h1|h2|h3|h4|h5|h6|p|#text]",//allow some children in the <a>-tag
verify_html: false,
It doesn't make any sense at all what TinyMCE is doing here.
The TinyMCE-website is telling me it uses html5-specification by default:
The schema option enables you to switch between the HTML4 and HTML5
schema. This controls the valid elements and attributes that can be
placed in the HTML. This value can either be the default html5, html4
or html5-strict.
And in the HTML5-Specifiations you can read:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
And now I don't get anything despite HTML5 valid markup AND extra valid-children setting in TinyMCE.
We have a requirement wherein a section of a page will be part authorable and part dynamic. What I mean by this is "You have 6 visits left out of 16." The 6 and 16 in the sentence are coming from a REST service call but the text "You have...visits left out of.." has to be authorable through dialog. Also, we are using AEM 6.
Thanks in advance
Maybe this solution will help others looking for simple placeholder text for their dialog textfields (OP not so much). Use an emptyText attribute...
<dialogText fieldLabel="AEM CLassic UI Text" jcr:primaryType="cq:Widget"
name="./nameOfText" emptyText="THIS IS THE PLACEHOLDER" xtype="textfield"/>
Perhaps you can start by extending foundation/components/text, where the user would be expected to enter a valid formatable string (i.e. "You have %d visits left out of %d").
In your component you would be implementing text.jsp therefore overriding the default behavior of foundation/components/text, in which you can do something like
<cq:text property="text" escapeXml="true"
placeholder="<%= Placeholder.getDefaultPlaceholder(slingRequest, component, null)%>"
tagName="span"
tagClass="myformatedmessage" />
You use tagName and tagClass which will wind up putting the formattable text in a <span class="myformatedmessage">...</span>. Then use jQuery to find it and populate the format placeholders after getting the data via ajax. All that jQuery code you can probably put into a clientlib folder within the same component you extended.
Based on your description, I think you are looking for replacement or substitution instead of placeholders.
"placeholder" generally refers to display text inside a form input that is displayed until the user enters data in the field (such as hint data).
You generally have 3 options for replacing parts of the data:
Server-side (prevents page from being cacheable in dispatcher). Requires parsing authored content & replace some kind of tags with desired REST data, such as "You have ${x} visits left out of ${y} total". Other ways of "tagging" substitution data could look like "You have %x% visits left out of %y%"
client-side JavaScript DOM manipulation once REST data returns. ie $el.html(newDomContentString)
client-side JavaScript templates (handlebars, dust, etc). Takes more initial setup in JS, but generally scales better.
I know this has been asked before, but I seem to be going around in circles
Where in the magento file structure is the HTML file that displays amongst other things Anashrias Sandals(as well as Magentos end of summer sale etc...)
Ive installed the sample application to Magento CE V1.7.0.2
I can see the definition in Magento/Admin under CMS->Pages->Home Page->2 Columns with Left Bar, but Ive wondered all through the file system. The PHTML specifies the familiar
echo $this->getChildHtml('content')
But I cant seem to find anything that 'content' could resolve to that display Anashrias graceful feet and sandals
Content.phtml simply states
getPageContent(); ?>
Arghhhhhhh
Even turning debugging on puts dashed red lines around every block EXCEPT the content page
Sadly those wonderfully manicured toes must go
...but how
I was going to just comment, but to explain thoroughly I need more space ;)
To answer your comment directly, the content you see isn't necessarily in a file somewhere, the "content" for CMS pages are within your database. By changing the content field on your CMS Page (Magento Admin -> CMS -> Pages -> select a page from the list), you can change the center content for that page. Magento has many different page "types" (Each Parent of the tags in xml (explained later) is a layout handle signifying a page type), common examples are cms, category, product, checkout, cart, customer account, etc.
So, when you see $this->getChildHtml('content');, what you see is a call to the system to pull the child block named "content" from the XML. This changes depending on what page you are on, as dictated by the XML and Magento Core Code.
Layout Files
Lets take a look at the source of where the name "content" comes from. Our current working directory is /app/design/frontend/base/default/layout/. In this folder you will see a list of .xml files, these are the files that dictate how a page is put together. The block named "content" is originally defined in page.xml at around line 91:
<block type="core/text_list" name="content" as="content" translate="label">
<label>Main Content Area</label>
</block>
Also, note that this section is "nested" in the <default></default> tags. Those tags are the layout handles I was talking about, and this shows that all pages should be loaded with this xml layout by default. So here is our "content" block, in all its glory. It's actually just a namespace. The other layout pages will each load what they need from within the content block.
Now, let's look at another relevant layout file, cms.xml, around line 45:
<cms_page translate="label">
<label>CMS Pages (All)</label>
<reference name="content">
<block type="core/template" name="page_content_heading" template="cms/content_heading.phtml"/>
<block type="page/html_wrapper" name="cms.wrapper" translate="label">
<label>CMS Content Wrapper</label>
<action method="setElementClass"><value>std</value></action>
<block type="cms/page" name="cms_page"/>
</block>
</reference>
</cms_page>
Here, the <reference name="content"> denotes that everything nested here is a child of the "content" block. We don't need to call it like <block name="content"/> because we know it was already defined in page.xml.
From there, they have the "cms.wrapper" block, which basically just sets the div that "wraps" around the rest of the cms content. Nested within the wrapper is our <block type="cms/page" name="cms_page"/>. This is the bad boy that outsources our template job to the cms/page block class, located in app/code/core/Mage/cms/page.php. From there, basically the class will grab our CMS Page detail from the database and present it for all to see.
So, to answer your question in short, there is no file that has the content of the cms pages, it is pulled from the database and generated upon page request.
Block Tag Explained
Blocks have various attributes to it, I'll go over the basics.
type="core/template": The type denotes what kind of block class it is. This refers to the folders nested in the "app/code/core/Mage/" folder (typically, with exceptions*). Here we are referring to app/code/core/Mage/Core/Block/Template.php. The class you set here will be attached to your template. This is responsible for the prolific use of $this->doSomething() in your template files. Basically the template file is calling the class object to do the work. "core/template" is a good general use class to fall back on when adding custom template files, although in certain circumstances you may need to choose something else.
name="content": Here we are giving our block a name. It would be the identifying name of the block, and it's used to reference that block everywhere. The block name is needed for such things as xml references (<reference name="blockName">) and to call blocks from within parent phtml template files (<?php echo $this->getChildHtml('blockName'); ?>). Note that all templates which call it without an argument ($this->getChildHtml('');) means to call ALL child blocks without being explicitly called.
as="content": This signifies an alias identifier. You can use the alias the same as the name above.
template="page/html/callouts.phtml": This sets the template for the block. Magento will look for app/design/frontend/your_package/your_theme/template/page/html/callouts.phtml and use it as the block's layout.
*Exceptions: Third-party extensions typically use either app/code/community or app/code/local folders. If you have to overwrite a core class, copy the directory structure to the local folder and then make your edits to the local version of the class.The classes load in this order: /local/ > /community/ > /core/. If a local version is found it will use that first, followed by community and core, and takes the first class file found with that name.
local.xml
Let me introduce you to the proper way of modifying your layout. Here, create a file called local.xml in your directory app/design/frontend/your_package/your_theme/layout/. This one file will house all your layout updates, to prevent any conflicts that may arise if you start editing the base layouts. Also, it keeps all your custom changes in one tidy file.
We'll remove some things that the demo store puts in that isn't really needed. Your layout should look like this, to start:
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Layout Handle -->
<default>
<!-- Block Reference -->
<reference name="left">
<!-- Remove by Reference Name -->
<remove name="left.permanent.callout"/>
</reference>
<reference name="right">
<remove name="right.permanent.callout"/>
</reference>
</default>
</layout>
Not a whole lot there, but what this will do is remove the callout ads on the left and right side bars. You'll need to refresh your cache upon making layout xml changes.
Read another one of my answers for some more things you can do with local.xml:
Magento Sidebar Customization
Edit 08/16/13:
I glossed over the Magento Design Guide (I had it once, good resource to start off, but by the first time I read it I already had learned everything it had to offer). The fallback structure it speaks of is in regarding the code/template/layout/skin/translation files.
The packages to use are partially set by you, in System->Configuration->Design. If it is not found, then it falls back to default. If default doesn't have what it's looking for, it grabs the base file. Magento does this inherently by design.
Unfortunately I don't see any built in mechanism for falling back database content. The cms content is made up of 4 tables, cms_block, cms_block_store, cms_page and cms_page_store. cms_block_store and cms_page_store each only contain the page/block id and the store id. both ids are primary keys. This is to relate the page/block id to which store it belongs to.
I suppose you could try to instigate a fallback for cms content by having it search for that page with store id, and if not, fall back to the same page ID from a different store. Or perhaps make a "base" store record that is only used as the fallback store id. I wouldn't be sure exactly how to implement either one though.
For your reference these are the cms_block and cms_page tables:
cms_block Table
[block_id] //Internal Id, Auto Increments and is Primary Key
[title] //Block Title as User Defined
[identifier] //Block Identifier, also User Defined
[content] //Block Content Stored Here
[creation_time] //Date-Time the Block was Created (ex. 2013-07-22 17:21:18)
[update_time] //Date-Time the Block was Last Updated
[is_active] //Show(1) or Hide(0) Block.
cms_page Table
[page_id] //Internal Id, Auto Increment, Primary Key
[title] //Page Title
[root_template] //Template Layout (one_column, two_columns_left, etc)
[meta_keywords] //Meta Keywords
[meta_description] //Meta Description
[identifier] //User Defined Page Identifier
[content_heading] //Content Heading to be Displayed
[content] //Page Content
[creation_time] //Date-Time Page Created
[update_time] //Date-Time Page Last Updated
[is_active] //Show(1) or Hide(0) Page (0 = 404 error)
[sort_order] //Legacy(?) Page Sorting Order**
[layout_update_xml] //XML Layout Changes***
[custom_theme] //Override Page w/ Different Theme
[custom_root_template] //Override Page w/ Different Layout than Set Above
[custom_layout_update_xml] //Override Page Layout w/ Different XML***
[custom_theme_from] //Set Date to Start Overriding Page w/ Custom Layout
[custom_theme_to] //Set Date to End Overriding Page w/ Custom Layout
/*
/**I don't see anywhere to set via Admin Back-End. All mine are set to (0),
/ my best guess is it was used to sort page link order in a menu. Either
/ they removed this feature somewhere along the way or I somehow removed
/ it and forgot.
/
/***Think local.xml without the need to use the layout handle. In other words:
/ You can modify specific pages with the same xml styling as used between
/ the <default></default> tags above. Don't actually put <?xml>, <layout>
/ or <default> (the update handle) tags.
*/
So that's all that is in the cms portion of the database.
Fallback
When properly configured, Magento will fall back in this order:
<!-- Front End Package/Theme Template and Layout Files -->
app/design/frontend/yourPackage/yourTheme/
app/design/frontend/yourPackage/default/
app/design/frontend/default/default/
app/design/frontend/base/default/
<!-- Admin Package/Theme Template and Layout Files -->
app/design/adminhtml/yourPackage/yourTheme/
app/design/adminhtml/yourPackage/default/
app/design/adminhtml/default/default/
<!-- Front End Package/Theme Skin (JS/CSS/Images) Files -->
skin/frontend/yourPackage/yourTheme/
skin/frontend/yourPackage/default/
skin/frontend/default/default/
skin/frontend/base/default/
<!-- Admin Package/Theme Skin (JS/CSS/Images) Files -->
skin/adminhtml/yourPackage/yourTheme/
skin/adminhtml/yourPackage/default/
skin/adminhtml/default/default/
<!-- Magento Code Pool -->
app/code/local/**
app/code/community/***
app/code/core/
/*
/**Magento will, by default, only look within local folders that currently
/ exist in the core directory, community directory*** OR if an active
/ module has codePool*** set to local.
/
/***Third-Party modules have to set which codePool they are using, which
/ specifies the default working directory for that module's code.
/ This is defined in the xml located at /app/etc/modules/*. If a module
/ has its codepool set to community, you can override the extension's
/ code by copying it to local.
/*
The "community" codePool is said to be there for legacy reasons, and that new extensions should be made to use the "local" only. I personally don't agree, it would make much more sense for every Third-Party extension to use the community codePool and retain the ability to override the original extension code from "local" without modifying the original.
Okay, I think I'm done with this question, as any more information here would be overload. If I missed anything, start a new question and link me to it ;D.
In my mark-up I want to add a space ( ) between elements without always having to use CSS to do so. If I put in my markup, GWT throws errors. Is there a way around it?
For example:
<g:Label>One </g:Label><g:Label>Two</g:Label>
Should show:
One Two
And not:
OneTwo
As documented here, you just have to add this to the top of your XML file and it will work!
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
Note that the GWT compiler won't actually visit this URL to fetch the file, because a copy of it is baked into the compiler. However, your IDE may fetch it.
Rather than use a Label, which to me shouldn't allow character entities at all, I use an HTML widget. In order to set the content, though, I find I have to do it as the HTML attribute, not the body content (note that the uppercase HTML is important here, since the set method is setHTML, not setHtml)
<g:HTML HTML="One " />