Hello Magento Devs,
In today’s tutorial, we are going to learn the Standard way to securely render Javascript inside Magento 2 template files using PHP.
While working with Magento 2 template files (.phtml) we are required to use javascript of jQuery code inside the PHTML files.
No doubt, Magento 2 is so magical and there are lots of ways to add JavaScript to Magento 2.
For example,
Via <script type=”text/javascript></script>
In Magento Style (data-mage-init)
The imperative approach (Connecting JS modules like jQuery)
Via require-config.js file
Source : (Four Ways to Add JavaScript to Magento 2)
Today we are going to see a different approach to render javascript securely inside the .phtml template files using PHP.
Render Javascript securely in templates using PHP
You will get the idea by referring below example which is used in the native Magento 2 .phtml files.
Example :
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer
*/
?>
<?= $block->getFormHtml() ?>
<?php $scriptString = <<<script
require([
"jquery",
"Magento_Ui/js/modal/alert",
"jquery/file-uploader",
"mage/translate"
], function($, alert){
$( '#css_file_uploader' ).fileupload({
dataType: 'json',
replaceFileInput: false,
url : '{$block->escapeJs($block->getUrl('*/system_design_theme/uploadcss'))}',
acceptFileTypes: /(.|\/)(css)$/i,
/**
* Add data
* @param e
* @param data
*/
add: function (e, data) {
var uploadButton = $('#css_uploader_button');
/** Unbind click event on file change */
uploadButton.unbind('click');
uploadButton.removeAttr('disabled');
uploadButton.click(function () {
$('#messages').html('');
$(this).attr('disabled', 'disabled');
data.submit();
});
},
/**
* On done event
* @param e
* @param data
*/
done: function (e, data) {
var contentArea = $('#custom_css_content');
$(this).val('');
$('#css_uploader_button').attr('disabled', 'disabled');
if (!data.result.error) {
contentArea.trigger('focusin');
contentArea.val(data.result.content);
contentArea.trigger('focusout');
}
},
/**
* Fail event
* @param e
* @param data
*/
fail: function(e, data) {
$(this).val('');
alert({
content: $.mage.__("We don't recognize this file extension.")
});
}
});
$(document).on('beforeSubmit', function() {
$('#css_file_uploader').val('');
});
});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>As you can see Javascript code is injected using PHP with the use of
<?php $scriptString = <<<script
//Your JS code
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>Note: Please take care that, while using this method you will have to remove $ at the time of using variables defined using var if you are facing error, otherwise you can skip.
