Problem/Motivation

Source revision / Target revision radios are conditionally displayed via js/diff.js using inline style display block / none. However, this inline style can be replaced with the hidden global attribute. The requires the 'unsafe-inline' property for sites using a Content-Security-Policy

See for reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cont...

Steps to reproduce

Enable the csp module and do not enable 'unsafe-inline' for style-src

Proposed resolution

Replace inline style on Source revision / Target revision radios with js-hide CSS class that implements !important

Remaining tasks

  1. Write a merge request
  2. Review
  3. Commit

User interface changes

None

API changes

None

Data model changes

None

Issue fork diff-3589000

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

idebr created an issue. See original summary.

idebr opened merge request !161

idebr’s picture

idebr commented
Status: Active » Needs review

The merge request replaces inline style on Source revision / Target revision radios with hidden global attribute, so the form is compatible with sites blocking 'unsafe-inline' styles.

I created a follow-up issue to replace jQuery with vanilla js, see #3589451: Replace jQuery usage with vanilla js

idebr’s picture

idebr commented
Status: Needs review » Needs work

The suggested approach has two limitations:

  1. Changing the value of the CSS display property on a hidden element will override the hidden state. This occurs for example in Claro
  2. Semantically, the hidden radio element is still part of the form, so the hidden attribute is not a good match to hide the content.

A better approach is to replace the inline styles with css classes that implement !important

idebr’s picture

idebr commented
Issue summary: View changes
Status: Needs work » Needs review

The proposed resolution is now to replace the inline styles with the js-hide CSS class that implements !important. The js-hide CSS class is include in the system/base library that can be assumed to be available on the page.

idebr’s picture

idebr commented
Title: Replace inline style on Source revision / Target revision radios with hidden global attribute » Replace inline style on Source revision / Target revision radios with js-hide CSS class

  • acbramley committed b4b845be on 2.x authored by idebr 
    fix: #3589000 Replace inline style on Source revision / Target revision...
acbramley’s picture

acbramley commented
Status: Needs review » Fixed

Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.