me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix hashtag column options styling (#14247)

Browse source 
* Enable nonces for stylesheets

* Pass nonce to react-select
This commit is contained in:
ThibG 2020-07-07 01:33:38 +02:00 committed by GitHub
parent c3187411c2
commit a783bdf4ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js
View file

@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import AsyncSelect from 'react-select/async'; import AsyncSelect from 'react-select/async';
import { NonceProvider } from 'react-select';
import SettingToggle from '../../notifications/components/setting_toggle'; import SettingToggle from '../../notifications/components/setting_toggle';
const messages = defineMessages({ const messages = defineMessages({
@ -58,18 +59,20 @@ class ColumnSettings extends React.PureComponent {
{this.modeLabel(mode)} {this.modeLabel(mode)}
</span> </span>
<AsyncSelect <NonceProvider nonce={document.querySelector('meta[name=style-nonce]').content}>
isMulti <AsyncSelect
autoFocus isMulti
value={this.tags(mode)} autoFocus
onChange={this.onSelect(mode)} value={this.tags(mode)}
loadOptions={this.props.onLoad} onChange={this.onSelect(mode)}
className='column-select__container' loadOptions={this.props.onLoad}
classNamePrefix='column-select' className='column-select__container'
name='tags' classNamePrefix='column-select'
placeholder={this.props.intl.formatMessage(messages.placeholder)} name='tags'
noOptionsMessage={this.noOptionsMessage} placeholder={this.props.intl.formatMessage(messages.placeholder)}
/> noOptionsMessage={this.noOptionsMessage}
/>
</NonceProvider>
</div> </div>
); );
} }

1
app/views/layouts/application.html.haml
View file

@ -25,6 +25,7 @@
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
= csrf_meta_tags = csrf_meta_tags
%meta{ name: 'style-nonce', content: request.content_security_policy_nonce }
= stylesheet_link_tag '/inert.css', skip_pipeline: true, media: 'all', id: 'inert-style' = stylesheet_link_tag '/inert.css', skip_pipeline: true, media: 'all', id: 'inert-style'

18
config/initializers/content_security_policy.rb
View file

@ -47,7 +47,25 @@ end
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
# Rails.application.config.content_security_policy_report_only = true # Rails.application.config.content_security_policy_report_only = true
Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }
# Monkey-patching Rails 5
module ActionDispatch
class ContentSecurityPolicy
def nonce_directive?(directive)
directive == 'style-src'
end
end
end
# Rails 6 would require the following instead:
# Rails.application.config.content_security_policy_nonce_directives = %w(style-src)
PgHero::HomeController.content_security_policy do |p| PgHero::HomeController.content_security_policy do |p|
p.script_src :self, :unsafe_inline, assets_host p.script_src :self, :unsafe_inline, assets_host
p.style_src :self, :unsafe_inline, assets_host p.style_src :self, :unsafe_inline, assets_host
end end
PgHero::HomeController.after_action do
request.content_security_policy_nonce_generator = nil
end