Security News
The Risks of Misguided Research in Supply Chain Security
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
bootstrap-hacks
Advanced tools
Tweaks (with a security and accessibility focus) to the Bootstrap framework.
Tweaks (with a security and accessibility focus) for Bootstrap version 3.
npm install bootstrap-hacks
bower install bootstrap-hacks
libraryDependencies += "org.webjars.npm" % "bootstrap-hacks" % "0.4.0"
// Import Bootstrap itself.
@import ".../bootstrap/less/bootstrap.less";
// Then import bootstrap-hacks.
@import ".../bootstrap-hacks/less/bootstrap-hacks.less";
You can find pre-compiled CSS in dist/css/bootstrap-hacks.css
. It includes all hacks except accessible varibles.
Bootstrap removes underline styles for links. This is a failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision. Include accessible-links.less
to restore the default underline styles.
Bootstrap's default placeholder color (#999
) doesn't meet WCAG 2.0 AA's color contrast requirement. Include accessible-variables.less
to override @input-color-placeholder
with a darker shade of gray (#767676
).
Bootstrap's default colors for @brand-primary
, @brand-success
, @brand-danger
, @state-info-text
and @state-danger-text
do not meet WCAG 2.0 AA's color contrast requirement. They are replaced with accessible alternatives.
Enables use of Bootstrap's progress bar component without requiring inline styles, in turn allowing CSP headers to exclude the 'unsafe-inline' style-src.
Include progressbar.less in your project however you like.
Remove the inline style attribute from your progress bars; progressbar.less will style them appropriately.
Before:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
After:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
aria-valuenow
(e.g. aria-valuenow="60"
will work, aria-valuenow="60.1"
won't).aria-valuemin="0"
and aria-valuemax="100"
).iOS can automatically zoom in when a form input element receives focus. Developers often disable this behaviour by setting restrictive values for the viewport
meta element. This can negatively affect accessibility:
Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided.
Instead, include prevent-ios-zoom-on-focus.less
to set the font size of form inputs to 16px
when in the extra small responsive breakpoint. This will prevent iOS from zooming automatically when an input receives focus but continue to allow users to pinch to zoom.
FAQs
Tweaks (with a security and accessibility focus) to the Bootstrap framework.
The npm package bootstrap-hacks receives a total of 1 weekly downloads. As such, bootstrap-hacks popularity was classified as not popular.
We found that bootstrap-hacks demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.