[FIX] website: prevent animation of anchor links with invalid fragment

Also secure the anchor creation to only allow valid names, that is
letters, digits, underscores and hyphens.

task-1913458

closes odoo/odoo#30701
This commit is contained in:
qsm-odoo
2019-01-31 17:35:07 +00:00
parent 43888662ff
commit 0abfaeda96
3 changed files with 25 additions and 11 deletions
@@ -1094,14 +1094,21 @@ registry.anchorSlide = Animation.extend({
* @private
*/
_onAnimateClick: function (ev) {
var hash = ev.currentTarget.hash;
var $anchor = $(hash);
if ($anchor.length && $anchor.attr('data-anchor') && this.$target[0].pathname === window.location.pathname) {
ev.preventDefault();
$('html, body').animate({
scrollTop: $anchor.offset().top,
}, 500);
if (this.$target[0].pathname !== window.location.pathname) {
return;
}
var hash = this.$target[0].hash;
if (!/^#[\w-]+$/.test(hash)) {
return;
}
var $anchor = $(hash);
if (!$anchor.length || !$anchor.attr('data-anchor')) {
return;
}
ev.preventDefault();
$('html, body').animate({
scrollTop: $anchor.offset().top,
}, 500);
},
});
@@ -1502,9 +1502,13 @@ options.registry.anchorName = options.Class.extend({
click: function () {
var $input = this.$('.o_input_anchor_name');
var anchorName = $input.val().trim().replace(/\s/g, '_');
var alreadyExists = $('#' + anchorName).length > 0;
$input.toggleClass('is-invalid', alreadyExists);
if (!alreadyExists) {
var isValid = /^[\w-]+$/.test(anchorName);
var alreadyExists = isValid && $('#' + anchorName).length > 0;
var anchorOK = isValid && !alreadyExists;
this.$('.o_anchor_not_valid').toggleClass('d-none', isValid);
this.$('.o_anchor_already_exists').toggleClass('d-none', !alreadyExists);
$input.toggleClass('is-invalid', !anchorOK);
if (anchorOK) {
self._setAnchorName(anchorName);
this.close();
}
@@ -107,7 +107,10 @@
<label class="col-form-label col-md-3" for="anchorName">Choose an anchor name</label>
<div class="col-md-9">
<input type="text" class="form-control o_input_anchor_name" id="anchorName" t-attf-value="#{currentAnchor}" placeholder="Anchor name"/>
<div class="invalid-feedback">The chosen name already exists</div>
<div class="invalid-feedback">
<p class="d-none o_anchor_not_valid">The chosen name is not valid (use only a-Z A-Z 0-9 - _)</p>
<p class="d-none o_anchor_already_exists">The chosen name already exists</p>
</div>
</div>
</div>
</div>