I am working with the Hybris CMS Cockpit (only as a user, not an admin) and I have built a page with the content slots.
However I am trying to insert some JavaScript into the page. I cannot see where I am mean't to add the JavaScript and I tried in-line <script> tags but they just get stripped out and turned to plain text.
Does anyone know if this is possible or will I have to ask an admin of the system to enable something?
You can add javascript but you will have to have a developer make some overrides to the configuration files (local.properties) of the environments you want to add javascript in.
The settings are:
xss.filter.rule.script_fragments=
xss.filter.rule.lonely_script_tags=
xss.filter.rule.lonely_script_tags2=
xss.filter.rule.javascript=
By doing this, the system will no longer strip those tags :)
Typhoid Marty is correct, however to expand on his answer:
The Hybris Cross Site Scripting (XSS) filter is stripping out your script tags.
You will probably want to simply disable it for the extensions where your users will be editing the site, specifically the CMSCockpit, HMC and HAC:
hac.xss.filter.enabled=false
hmc.xss.filter.enabled=false
cmscockpit.xss.filter.enabled=false
You can find more configuration options for the XSS filter in the documentation here:
https://wiki.hybris.com/display/release5/Web+Security+XSS+Filter
Answers suggested by #Typhoid Marty and #kabadisha will fix the issue. Adding another workaround here. script can be added into content of component even if xss filter is configured as xss.filter.enabled=true.
This can be achieved by creating an impex for component and importing it via hac as a script with 'Enable code execution' check as true.
Here's an example :
<script type="text/javascript">
function myFunction()
{
document.body.style.backgroundColor="lavender";
<!-- document.write(Date()); -->
alert(document.getElementById("hai"));
}
</script>
In fact, Hybris cockpit use ZK framework, views are ".zul" files.
Related
i'm trying to add <script> ... </script> to HTML element in Neos CMS, could you please tell me how to do it, because HTML element in Neos CMS doesn't accept js. Is there any alternative how to do it please. Thanks for any recommendations.
There is a package available with wich the editor can add source code like that. But be careful with this feature as with great power (of the editor) comes great responsibility!
Depending on what your use case is, it may be more secure to provide a custom NodeType for the editor which then adds this JS code via fusion.
One thing you may want to think about is loading things from external sources might be problematic for GDPR compliance.
Is it possible to conditionally include different clientlibs based on the user agent of the browser?
IE
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.js # categories='a'}"/>
Modern Browsers
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.js # categories='b'}"/>
AEM version: 6.3
If not, what are the other alternatives to achieve the same?
Note: I tried to get this check done in a sling rewriter server side but the problem is, with the dispatcher on, it will only hit AEM for the furst time and cache the html, any subsequent hit will not invoke any server side logic to render it. Hence, it has to be done client side IMO
For this you have to write custom clientlibs templates as described here : https://github.com/nateyolles/aem-clientlib-async.
And then in the WCMUse class you can check user agent and include clientlibs accordingly.
First of all, as you already pointed out correctly, you need asolution that works with the dispatcher cache. So Sightly is not an option.
Then, regarding the fact, that most AEM templates have paragraph systems with multiple possible components to be added to a page on the one hand and AEM clientlibs are build on a template level (and not on page level) you end up with a clientlib holding lots of unused JS and CSS most of the time, since you have to cover all the possible options of components used in your page and paragraph system.
With that in mind, clientlibs might not be a good option to be used after all.
Having static CSS and JS files in your AEM repo and referencing them client side based on a JS snippet will do the trick and - in most cases - you will not buy any side effects with that approach.
You can either:
Wrap your clientlibs with conditional comments: https://stackoverflow.com/a/11703767
Create a Use-Object that check the User-Agent header and exposes a method isIE that you can use to conditionally include the clientlibs with data-sly-test. Alternatively your Use-Object could just return the proper categiers based on user agent so you can have only one clientlib call.
You could use the <script module> and <script nomodule> to achieve that. The first one is ignored by older browsers and the second one by the modern ones. Similar to Vue's Modern Mode. Check: https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
More likely you would need some back-end to create your custom clientlib template.
The publisher instance has the following javascript files included:
/etc/clientlibs/granite/jquery.min.js
/etc/clientlibs/granite/utils.min.js
/etc/clientlibs/granite/jquery/granite.min.js
/etc/clientlibs/foundation/main.min.js
/etc/clientlibs/granite/jquery/granite/csrf.min.js
It would be best to exclude them for performance and also the fact that I am using jQuery 2.0 as my part of AEM site.
These scripts(not including the csrf.min.js) are part of the category cq.foundation-main. You can use this utility for checking this.
http://localhost:4502/libs/granite/ui/content/dumplibs.test.html?categories=cq.foundation-main
If you create your page template components by extending the OOTB wcm/foundation/components/page (assuming you use sightly), AEM will add these scripts in the head section. More specifically these are included in headlibs.html file present under the OOTB page component.
To overcome this, you can override this file in your component, and either comment this below line or include it conditionally only when wcmmode is edit.
<sly data-sly-test="${wcmmode.edit}" data-sly-call="${clientLib.all # categories='cq.foundation-main'}" />
For JSP based components (foundation/components/page), the same thing is done in headlibs.jsp.
By the way, you wouldn't want to remove the CSRF JS. It's AEM's solution to counter CSRF issues.
What you see is the clientcontext related js'es
The script that loads the given js'es is as below (or sth similiar)
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
either you exclude it completely for publish (wcmMode=disabled) which would probably break sth related to analytics on your publish, or change the include to some overwrite of the clientcontext component that you'd develop.
If you however don't use any native Adobe integration you should be safe just with excluding the thing.
I have developed a front-end system plugin for Joomla 3.0 which replaces keywords for HTML formatted objects. This works perfectly in my local lab environment but when installed on the hosted site (WHM/cPanel) it causes issues with the administration area and prevents the administrators from editing the articles.
When the administrator clicks on a article to edit the page attempts to load then appears to go back to the same page. I have developed this as a front-end plugin only so I shouldn't affect the administration area.
The problem is also preventing admin from creating anything new (news, blogs, content, menu items etc.)
As this does not happen within my lab I can only assume the issue is with some server settings which I may need to enable/disable. I have complete administrative access to both WHM, cPanel and Joomla so can change settings where ever needed...
Things I have observed:
The article URL changes from:
/administrator/index.php?option=com_content&view=article&layout=edit&id=7
to:
/administrator/index.php?option=com_content&view=article&layout=edit&id=7
when the plugin is enabled. Notice the ampersand has changed to amp;. This makes me think it could be something to do with UTF-8 character encoding has been set in MySQL to utf8general_ci.
Any pointers on configurations I may need to change would be greatly received.
Question: How do I prevent this from occurring (without removing my essential plugin).
If you create System Plugin that should work only on front-end you have to check in your plugin if current page is front-end. You can do it using this function: JFactory::getApplication()->isSite() or JFactory::getApplication()->isAdmin()
Example usage (I assume you use onAfterRender event):
function onAfterRender() {
// Exit if current page is from Administration panel
if( JFactory::getApplication()->isAdmin() ) return;
/* your plugin main code goes here*/
}
It will prevent your plugin from modifying administration panel output. If you already done it and it does check like it should to, there is no way that reason of your problems is that plugin.
How can I implement a full html,php,js and css page into a wordpress page?
Example:
I have a app.php that has a text box, when You press enter it displays the text with a php echo. With the users profile picture from Facebook.
How Can I inset/implement that into a WordPress page?
HTML/PHP: The simplest way may just be to create an extra template in your theme. You can view WordPress template hierarchy here: Template Hierarchy
JS/CSS: If the JavaScript and CSS makes the most sense to be embedded (it usually does!), you can use hooks and actions in a simple plugin (or potentially your functions.php page) to include the JavaScript and CSS you need.
wp_enqueue_script
wp_enqueue_style
Note: I have not personally used functions.php (found in your theme files) to call these sorts of hooks, but I assume it would work just fine.
If you are using a theme that constantly receives updates, it is worth building a plugin to do the job. If not, it's easiest to just modify the theme.
There are two options as far as I know. First one is that you embed the code directly into your posts, and install the plugin called PHP execution. Second, try to create your own page template, and place your own code in the template. then you can create a page in the dashboard and select the template.