Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blur sensitive search results #2640

Merged
merged 5 commits into from
Jul 17, 2023
Merged

Blur sensitive search results #2640

merged 5 commits into from
Jul 17, 2023

Conversation

dhruvkb
Copy link
Member

@dhruvkb dhruvkb commented Jul 13, 2023

Fixes

Fixes #2369 by @dhruvkb

Description

This PR adds logic to the image and audio result components to blur their content if their media item has been flagged as sensitive. It also replaces title and creator strings from the DOM with placeholders to prevent any sensitive information from leaking through assistive technology that bypasses CSS and interacts with the DOM.

Testing Instructions

  1. Check out the PR and run the dev server.
  2. Enable the fake_sensitive toggle in the /preferences page.
  3. Search for something like 'cat'.
  4. Observe blurring of fake-sensitive results in all three views:
    • mixed media
    • only images
    • only audio

Checklist

  • My pull request has a descriptive title (not a vague title likeUpdate index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.
  • I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@dhruvkb dhruvkb requested a review from a team as a code owner July 13, 2023 10:09
@github-actions github-actions bot added the 🧱 stack: frontend Related to the Nuxt frontend label Jul 13, 2023
@openverse-bot openverse-bot added 🟨 priority: medium Not blocking but should be addressed soon 🌟 goal: addition Addition of new feature 🕹 aspect: interface Concerns end-users' experience with the software labels Jul 13, 2023
@github-actions
Copy link

github-actions bot commented Jul 13, 2023

Size Change: +1.88 kB (0%)

Total Size: 831 kB

Filename Size Change
./frontend/.nuxt/dist/client/app.js 122 kB +216 B (0%)
./frontend/.nuxt/dist/client/app.modern.js 113 kB +213 B (0%)
./frontend/.nuxt/dist/client/components/v-all-results-grid.js 6.52 kB +106 B (+2%)
./frontend/.nuxt/dist/client/components/v-all-results-grid.modern.js 6.36 kB +100 B (+2%)
./frontend/.nuxt/dist/client/components/v-audio-track.js 5.38 kB +108 B (+2%)
./frontend/.nuxt/dist/client/components/v-audio-track.modern.js 5.34 kB +105 B (+2%)
./frontend/.nuxt/dist/client/components/v-box-layout.js 1.33 kB +79 B (+6%) 🔍
./frontend/.nuxt/dist/client/components/v-box-layout.modern.js 1.34 kB +83 B (+7%) 🔍
./frontend/.nuxt/dist/client/components/v-image-cell.js 1.93 kB +115 B (+6%) 🔍
./frontend/.nuxt/dist/client/components/v-image-cell.modern.js 1.92 kB +110 B (+6%) 🔍
./frontend/.nuxt/dist/client/components/v-image-grid.js 4.4 kB +115 B (+3%)
./frontend/.nuxt/dist/client/components/v-image-grid.modern.js 4.27 kB +108 B (+3%)
./frontend/.nuxt/dist/client/components/v-row-layout.js 1.74 kB +88 B (+5%) 🔍
./frontend/.nuxt/dist/client/components/v-row-layout.modern.js 1.74 kB +88 B (+5%) 🔍
./frontend/.nuxt/dist/client/components/v-sources-table.js 14.3 kB +121 B (+1%)
./frontend/.nuxt/dist/client/components/v-sources-table.modern.js 14.3 kB +121 B (+1%)
ℹ️ View Unchanged
Filename Size Change
./frontend/.nuxt/dist/client/232.js 272 B 0 B
./frontend/.nuxt/dist/client/232.modern.js 276 B 0 B
./frontend/.nuxt/dist/client/233.js 1.85 kB 0 B
./frontend/.nuxt/dist/client/commons/app.js 90.2 kB -3 B (0%)
./frontend/.nuxt/dist/client/commons/app.modern.js 80.7 kB +6 B (0%)
./frontend/.nuxt/dist/client/commons/components/v-search-grid/pages/search.js 5.18 kB 0 B
./frontend/.nuxt/dist/client/commons/components/v-search-grid/pages/search.modern.js 5.62 kB 0 B
./frontend/.nuxt/dist/client/components/loading-icon.js 728 B 0 B
./frontend/.nuxt/dist/client/components/loading-icon.modern.js 732 B 0 B
./frontend/.nuxt/dist/client/components/table-sort-icon.js 514 B 0 B
./frontend/.nuxt/dist/client/components/table-sort-icon.modern.js 519 B 0 B
./frontend/.nuxt/dist/client/components/v-audio-cell.js 570 B 0 B
./frontend/.nuxt/dist/client/components/v-audio-cell.modern.js 575 B 0 B
./frontend/.nuxt/dist/client/components/v-audio-details.js 1.79 kB -1 B (0%)
./frontend/.nuxt/dist/client/components/v-audio-details.modern.js 1.77 kB 0 B
./frontend/.nuxt/dist/client/components/v-audio-track-skeleton.js 958 B 0 B
./frontend/.nuxt/dist/client/components/v-audio-track-skeleton.modern.js 962 B 0 B
./frontend/.nuxt/dist/client/components/v-back-to-search-results-link.js 633 B 0 B
./frontend/.nuxt/dist/client/components/v-back-to-search-results-link.modern.js 642 B 0 B
./frontend/.nuxt/dist/client/components/v-bone.js 632 B 0 B
./frontend/.nuxt/dist/client/components/v-bone.modern.js 636 B 0 B
./frontend/.nuxt/dist/client/components/v-content-link.js 1.06 kB 0 B
./frontend/.nuxt/dist/client/components/v-content-link.modern.js 1.06 kB 0 B
./frontend/.nuxt/dist/client/components/v-content-page.js 531 B 0 B
./frontend/.nuxt/dist/client/components/v-content-page.modern.js 535 B 0 B
./frontend/.nuxt/dist/client/components/v-content-report-button.js 491 B 0 B
./frontend/.nuxt/dist/client/components/v-content-report-button.modern.js 496 B 0 B
./frontend/.nuxt/dist/client/components/v-content-report-form.js 3.33 kB 0 B
./frontend/.nuxt/dist/client/components/v-content-report-form.modern.js 3.21 kB 0 B
./frontend/.nuxt/dist/client/components/v-content-report-popover.js 3.79 kB 0 B
./frontend/.nuxt/dist/client/components/v-content-report-popover.modern.js 3.67 kB 0 B
./frontend/.nuxt/dist/client/components/v-copy-button.js 3.99 kB 0 B
./frontend/.nuxt/dist/client/components/v-copy-button.modern.js 4 kB 0 B
./frontend/.nuxt/dist/client/components/v-copy-license.js 2.28 kB 0 B
./frontend/.nuxt/dist/client/components/v-copy-license.modern.js 2.25 kB 0 B
./frontend/.nuxt/dist/client/components/v-dmca-notice.js 792 B 0 B
./frontend/.nuxt/dist/client/components/v-dmca-notice.modern.js 799 B 0 B
./frontend/.nuxt/dist/client/components/v-error-image.js 2.41 kB 0 B
./frontend/.nuxt/dist/client/components/v-error-image.modern.js 2.38 kB 0 B
./frontend/.nuxt/dist/client/components/v-error-section.js 372 B 0 B
./frontend/.nuxt/dist/client/components/v-error-section.modern.js 376 B 0 B
./frontend/.nuxt/dist/client/components/v-external-search-form.js 1.99 kB -1 B (0%)
./frontend/.nuxt/dist/client/components/v-external-search-form.modern.js 1.98 kB 0 B
./frontend/.nuxt/dist/client/components/v-external-source-list.js 894 B 0 B
./frontend/.nuxt/dist/client/components/v-external-source-list.modern.js 895 B 0 B
./frontend/.nuxt/dist/client/components/v-full-layout.js 1.57 kB 0 B
./frontend/.nuxt/dist/client/components/v-full-layout.modern.js 1.57 kB 0 B
./frontend/.nuxt/dist/client/components/v-grid-skeleton.js 1.54 kB 0 B
./frontend/.nuxt/dist/client/components/v-grid-skeleton.modern.js 1.54 kB +1 B (0%)
./frontend/.nuxt/dist/client/components/v-home-gallery.js 4.28 kB 0 B
./frontend/.nuxt/dist/client/components/v-home-gallery.modern.js 4.26 kB 0 B
./frontend/.nuxt/dist/client/components/v-homepage-content.js 1.8 kB 0 B
./frontend/.nuxt/dist/client/components/v-homepage-content.modern.js 1.77 kB 0 B
./frontend/.nuxt/dist/client/components/v-image-details.js 1.44 kB 0 B
./frontend/.nuxt/dist/client/components/v-image-details.modern.js 1.43 kB 0 B
./frontend/.nuxt/dist/client/components/v-license-tab-panel.js 640 B 0 B
./frontend/.nuxt/dist/client/components/v-license-tab-panel.modern.js 649 B 0 B
./frontend/.nuxt/dist/client/components/v-load-more.js 1.17 kB 0 B
./frontend/.nuxt/dist/client/components/v-load-more.modern.js 1.07 kB 0 B
./frontend/.nuxt/dist/client/components/v-media-license.js 930 B -1 B (0%)
./frontend/.nuxt/dist/client/components/v-media-license.modern.js 940 B 0 B
./frontend/.nuxt/dist/client/components/v-media-reuse.js 2.93 kB 0 B
./frontend/.nuxt/dist/client/components/v-media-reuse.modern.js 2.91 kB 0 B
./frontend/.nuxt/dist/client/components/v-media-tag.js 416 B 0 B
./frontend/.nuxt/dist/client/components/v-media-tag.modern.js 420 B 0 B
./frontend/.nuxt/dist/client/components/v-modal.js 1.01 kB 0 B
./frontend/.nuxt/dist/client/components/v-modal.modern.js 995 B 0 B
./frontend/.nuxt/dist/client/components/v-no-results.js 851 B -1 B (0%)
./frontend/.nuxt/dist/client/components/v-no-results.modern.js 858 B 0 B
./frontend/.nuxt/dist/client/components/v-radio.js 1 kB 0 B
./frontend/.nuxt/dist/client/components/v-radio.modern.js 1.01 kB 0 B
./frontend/.nuxt/dist/client/components/v-related-audio.js 1.47 kB +1 B (0%)
./frontend/.nuxt/dist/client/components/v-related-audio.modern.js 1.48 kB +1 B (0%)
./frontend/.nuxt/dist/client/components/v-related-images.js 1.06 kB 0 B
./frontend/.nuxt/dist/client/components/v-related-images.modern.js 1.06 kB 0 B
./frontend/.nuxt/dist/client/components/v-report-desc-form.js 976 B 0 B
./frontend/.nuxt/dist/client/components/v-report-desc-form.modern.js 980 B 0 B
./frontend/.nuxt/dist/client/components/v-scroll-button.js 891 B 0 B
./frontend/.nuxt/dist/client/components/v-scroll-button.modern.js 892 B 0 B
./frontend/.nuxt/dist/client/components/v-search-grid.js 6.81 kB 0 B
./frontend/.nuxt/dist/client/components/v-search-grid.modern.js 6.17 kB -1 B (0%)
./frontend/.nuxt/dist/client/components/v-search-results-title.js 617 B 0 B
./frontend/.nuxt/dist/client/components/v-search-results-title.modern.js 620 B 0 B
./frontend/.nuxt/dist/client/components/v-server-timeout.js 298 B 0 B
./frontend/.nuxt/dist/client/components/v-server-timeout.modern.js 303 B 0 B
./frontend/.nuxt/dist/client/components/v-sketch-fab-viewer.js 1.02 kB +1 B (0%)
./frontend/.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js 915 B +2 B (0%)
./frontend/.nuxt/dist/client/components/v-snackbar.js 1.06 kB 0 B
./frontend/.nuxt/dist/client/components/v-snackbar.modern.js 1.06 kB 0 B
./frontend/.nuxt/dist/client/components/v-warning-suppressor.js 306 B 0 B
./frontend/.nuxt/dist/client/components/v-warning-suppressor.modern.js 311 B 0 B
./frontend/.nuxt/dist/client/pages/about.js 1.42 kB 0 B
./frontend/.nuxt/dist/client/pages/about.modern.js 1.42 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/audio/_id/index.js 6.74 kB +3 B (0%)
./frontend/.nuxt/dist/client/pages/audio/_id/index.modern.js 6.54 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/feedback.js 1.36 kB 0 B
./frontend/.nuxt/dist/client/pages/feedback.modern.js 1.36 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/image/_id/index.js 7.24 kB +1 B (0%)
./frontend/.nuxt/dist/client/pages/image/_id/index.modern.js 7.04 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/image/_id/report.js 4.96 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/image/_id/report.modern.js 4.74 kB 0 B
./frontend/.nuxt/dist/client/pages/index.js 6.36 kB -2 B (0%)
./frontend/.nuxt/dist/client/pages/index.modern.js 6.32 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/preferences.js 1.32 kB 0 B
./frontend/.nuxt/dist/client/pages/preferences.modern.js 1.31 kB 0 B
./frontend/.nuxt/dist/client/pages/privacy.js 1.26 kB +1 B (0%)
./frontend/.nuxt/dist/client/pages/privacy.modern.js 1.26 kB -2 B (0%)
./frontend/.nuxt/dist/client/pages/search-help.js 1.62 kB 0 B
./frontend/.nuxt/dist/client/pages/search-help.modern.js 1.61 kB -1 B (0%)
./frontend/.nuxt/dist/client/pages/search.js 2.25 kB 0 B
./frontend/.nuxt/dist/client/pages/search.modern.js 2.05 kB 0 B
./frontend/.nuxt/dist/client/pages/search/audio.js 4.1 kB 0 B
./frontend/.nuxt/dist/client/pages/search/audio.modern.js 3.98 kB +2 B (0%)
./frontend/.nuxt/dist/client/pages/search/image.js 544 B 0 B
./frontend/.nuxt/dist/client/pages/search/image.modern.js 549 B 0 B
./frontend/.nuxt/dist/client/pages/search/index.js 441 B 0 B
./frontend/.nuxt/dist/client/pages/search/index.modern.js 446 B 0 B
./frontend/.nuxt/dist/client/pages/search/model-3d.js 242 B 0 B
./frontend/.nuxt/dist/client/pages/search/model-3d.modern.js 246 B 0 B
./frontend/.nuxt/dist/client/pages/search/search-page.types.js 266 B 0 B
./frontend/.nuxt/dist/client/pages/search/search-page.types.modern.js 271 B 0 B
./frontend/.nuxt/dist/client/pages/search/video.js 240 B 0 B
./frontend/.nuxt/dist/client/pages/search/video.modern.js 244 B 0 B
./frontend/.nuxt/dist/client/pages/sources.js 1.53 kB 0 B
./frontend/.nuxt/dist/client/pages/sources.modern.js 1.54 kB 0 B
./frontend/.nuxt/dist/client/runtime.js 2.69 kB 0 B
./frontend/.nuxt/dist/client/runtime.modern.js 2.69 kB 0 B
./frontend/.nuxt/dist/client/vendors/app.js 65.3 kB +2 B (0%)
./frontend/.nuxt/dist/client/vendors/app.modern.js 64.8 kB 0 B

compressed-size-action

Copy link
Contributor

@obulat obulat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! The changes work really work, both visually and with the screen reader.

Two points:

  • blur seems to not be enough.
  • should we also blur the audio genre?

:alt="image.title"
:class="[
isSquare ? 'h-full' : 'margin-auto',
{ 'scale-105 blur': shouldBlur },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use either blur-xl or blur-lg. Currently, some images are too clear and don't really hide the content.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I picked a lower level of blur to help the user get a general idea of the shape of the contents of the image because with more blur, only some colour clues are left.

But I agree with your reasoning and will increase the amount.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a possibility of the genre containing anything sensitive? I don't think that is possible.

Copy link
Member

@zackkrida zackkrida Jul 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If anything, genre will help people make a determination about whether or not they want to look at an audio file. I recommend we leave it unblurred

Copy link
Member

@zackkrida zackkrida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM once we use the blur values from the designs. Those were chosen carefully as part of the design approval process. According to Figma, there are two values in use:

  • filter: blur(60px); for images
  • filter: blur(4px); for text in the audio components (author, title)

@github-actions github-actions bot added the 🧱 stack: documentation Related to Sphinx documentation label Jul 14, 2023
@dhruvkb
Copy link
Member Author

dhruvkb commented Jul 14, 2023

I messed up, I forgot to look up the blur values in Figma. Sorry for the double reviews, it should be fixed now.

@github-actions
Copy link

Full-stack documentation: https://docs.openverse.org/_preview/2640

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

@zackkrida zackkrida requested a review from obulat July 14, 2023 18:59
Copy link
Contributor

@obulat obulat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice abstraction for blur styles!

@dhruvkb dhruvkb merged commit 39341c7 into main Jul 17, 2023
41 checks passed
@dhruvkb dhruvkb deleted the cell_blur branch July 17, 2023 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🕹 aspect: interface Concerns end-users' experience with the software 🌟 goal: addition Addition of new feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Support blurring in image and audio results
4 participants