Brave Shield Breaking Konva, a common JavaScript library for drawing canvas graphics

Brave Browser
1

Brave Browser stopping click events on Konva framework. Konva is a common and well vetted framework for dealing with graphics in Javascript.

  1. Create react app
  2. npm install react-konva konva --save
  3. Add the following to your return()
<Stage width={size.width} height={size.height} >
                                <Layer ref={layerRef2} 
                                        className="excel_div_canvas excel_inner" 
                                        draggable={zoomed} >
                                    <Group ref={groupRef2}>
                                
                                                {canvas2[1].w > 0 && 
                                                <>
                                             
                                                    <Image
                                                    key={canvas2[2]}
                                                    source="path/to/source"

                                                    x={size.width / 2}
                                                    y={size.height / 2}
                                                    offsetX={+canvas2[1].w / 2}
                                                    offsetY={+canvas2[1].h / 2}
                                                    scaleY={canvas2[1].canvasScale}
                                                    scaleX={canvas2[1].canvasScale}

                                                    onClick={(e) => {
                                                    handleCanvasClick(e)
                                                    }}

                                                    />
                                       </Group>
                               </Layer>
          </Stage>
  1. create handleCanvasClick function to handle click.
  2. npm run start the react project, try to click the image (can also be Rect or any Konva element with click events).
  3. ???
  4. no profit

Now this is how you get it to work!

  1. Open Brave’s Settings > Shields
  2. Block fingerprinting setting is set to Standard. Disable it.
  3. ???
  4. Profit!

Results are that the image doesn’t register the click unless you turn off Brave’s “block fingerprinting”.

Expected result: the click event is registered like on every other Chromium browser

Reproduces every time

MacOs Ventura 13.6
Brave Version 1.58.135 Chromium: 117.0.5938.140 (Official Build) (x86_64)

I’ve also let the react-konva team know, but this was working fine on Brave until I updated my browser to the latest version. Took me four days to finally pinpoint the issue.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.